React Server Components (RSC) compatibility

React Server Components (RSC) is a new application architecture designed by the React team which combines the simple "request/response" mental model of server-centric Multi-Page Apps with the seamless interactivity of client-centric Single-Page Apps, giving you the best of both worlds.

Please refer to the React official docs for more information.

What we've done to enable RSC with Mesh

To support for RSC, we have made following changes to our Mesh Components.

Added 'use client' directive to each component entry point

As Mesh relies on styled-components for styling, a CSS-in-JS styling solution that makes heavy use of React Context, we must mark each mesh component with the 'use client'; directive.

This should mean that you can import and use our Mesh components within pages/routes of your Next application without the need to add the 'use client' directive` to the file.

There are however some situations where the directive will still be necessary.

Dynamic function props

If you are passing function as a prop, please make sure to add use client at the top of the component's file. Consider the example below, where we are passing onClick function to PrimaryButton. This will throw an error, and you must add use client to the file.

<PrimaryButton onClick={() => console.log('Please add use client at the top')}>Primary</PrimaryButton>

React hooks

If you are using react hooks within a file, the use client directive must be added. This is a requirement of react, more so than mesh. Consider the example below, where we are using useState hook to maintain the state of the Expander component. This will throw an error, unless use client has been added.

() => {
  const [expanded, setExpanded] = React.useState(false);
  return (
    <>
      <PrimaryButton onClick={() => setExpanded(!expanded)}>{expanded ? 'Collapse' : 'Expand'}</PrimaryButton>
      <Expander expanded={expanded}>
        <Box padding={4}>Lorem ipsum dolor si amet parturient neque scelerisque condimentum massa</Box>
      </Expander>
    </>
  );
};

Subcomponents exported individually

RSC does not support subcomponents which are accessed with .(dot) operator. For example, if you were to try and use our Accordion like so:

import Accordion from '@nib-components/accordion';

const MyAccordion = () => (
  <Accordion>
    <Accordion.Item title="Diam parturient">Diam parturient a a lorem augue montes.</Accordion.Item>
    <Accordion.Item title="Parturient habitasse">Parturient habitasse tincidunt porttitor.</Accordion.Item>
  </Accordion>
);

You would see the following error:

Error: Objects are not valid as a React child (found: object with keys {$$typeof, _payload, _init}). If you meant to render a collection of children, use an array instead.

To work around this, we have exported this subcomponent independently:

import Accordion, {AccordionItem} from '@nib-components/accordion';

const MyAccordion = () => (
  <Accordion>
    <AccordionItem title="Diam parturient">Diam parturient a a lorem augue montes.</AccordionItem>
    <AccordionItem title="Parturient habitasse">Parturient habitasse tincidunt porttitor.</AccordionItem>
  </Accordion>
);

We have exported every one of these subcomponents from across Mesh as named exports. The full list includes:

• Accordion: AccordionItem
• Card: CardContent, CardFooter, FlashCardContent and FlashCardFooter
• ProductCard: ProductCardHeaderName, ProductCardHeaderPrice, ProductCardHeaderPaymentFrequency,ProductCardHeaderSmallText, ProductCardHeaderStrikeThroughPrice, HospitalTiersBadgeModalButton and HospitalTiersBadgeModalModal
• UtilityButton: UtilityButtonTitle and UtilityButtonSubTitle

Help or feedback

Please reach out to the DesignOps team via the #mesh slack channel if we have missed anything and are blocking/hindering your use of RSC in your application.

Resources

• https://www.freecodecamp.org/news/how-to-use-react-server-components/
• https://vercel.com/blog/understanding-react-server-components