Server-side rendering with Primer React

SSR-safe ID generation

Some Primer components generate their own DOM IDs. Those IDs must be isomorphic (so that server-side rendering and client-side rendering yield the same ID, avoiding hydration issues) and unique across the DOM. We use @react-aria/ssr to generate those IDs. In client-only rendering, this doesn't require any additional work. In SSR contexts, you must wrap your application with at least one SSRProvider:

import {SSRProvider} from '@primer/react';

function App() {
  return (
    <SSRProvider>
      <MyApplication />
    </SSRProvider>
  )
}

SSRProvider maintains the context necessary to ensure IDs are consistent. In cases where some parts of the react tree are rendered asynchronously, you should wrap an additional SSRProvider around the conditionally rendered elements:

function MyApplication() {
  const [dataA] = useAsyncData('a');
  const [dataB] = useAsyncData('b');

  return (
    <>
      <SSRProvider>
        {dataA && <MyComponentA data={dataA} />}
      </SSRProvider>
      <SSRProvider>
        {dataB && <MyComponentB data={dataB} />}
      </SSRProvider>
    </>
  )
}

This will ensure that the IDs are consistent for any sequencing of dataA and dataB being resolved.

See also React Aria's server side rendering documentation.