Server side rendering

Radix Primitives can be rendered on the server. However a little setup is required to make sure they work properly.

Server side rendering or SSR, is a technique used to render components to HTML on the server, as opposed to rendering them only on the client.

Static rendering is another similar approach. Instead it pre-renders pages to HTML at build time rather than on each request.

You should be able to use all of our primitives with both approaches, for example with Next.js or Gatsby, with very little setup required.

The way SSR works with React is by rendering components to HTML on the server and then hydrating the HTML, thus enhancing it with interactivity.

For all of this to function properly, React has to match the DOM structure between client and server. This is potentially an issue for Radix Primitives because we rely on generating random ids internally so that accessibility works out of the box.

To enable more deterministic ids between server and client and ensure that no mismatch occurs, wrap your app with our IdProvider like so:

import { IdProvider } from '@radix-ui/react-id';
export default () => (
<IdProvider>
<App />
</IdProvider>
);