Server Side Rendering

Overview

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.

Accessibility and SSR

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 the components 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 "@wonderflow/react-components";

export default () => (
  <IdProvider>
    <App />
  </IdProvider>
);