unstable_RSCHydratedRouter

This API is experimental and subject to breaking changes in minor/patch releases. Please use with caution and pay very close attention to release notes for relevant changes.

Summary

Reference Documentation ↗

Hydrates a server rendered unstable_RSCPayload in the browser.

import { startTransition, StrictMode } from "react";
import { hydrateRoot } from "react-dom/client";
import {
  unstable_getRSCStream as getRSCStream,
  unstable_RSCHydratedRouter as RSCHydratedRouter,
} from "react-router";
import type { unstable_RSCPayload as RSCPayload } from "react-router";

createFromReadableStream(getRSCStream()).then((payload) =>
  startTransition(async () => {
    hydrateRoot(
      document,
      <StrictMode>
        <RSCHydratedRouter
          createFromReadableStream={createFromReadableStream}
          payload={payload}
        />
      </StrictMode>,
      { formState: await getFormState(payload) },
    );
  }),
);

Signature

function RSCHydratedRouter({
  createFromReadableStream,
  fetch: fetchImplementation = fetch,
  payload,
  routeDiscovery = "eager",
  getContext,
}: RSCHydratedRouterProps)

Props

createFromReadableStream

Your react-server-dom-xyz/client's createFromReadableStream function, used to decode payloads from the server.

fetch

Optional fetch implementation. Defaults to global fetch.

getContext

A function that returns an RouterContextProvider instance which is provided as the context argument to client actions, loaders and middleware. This function is called to generate a fresh context instance on each navigation or fetcher call.

payload

The decoded unstable_RSCPayload to hydrate.

routeDiscovery

"eager" or "lazy" - Determines if links are eagerly discovered, or delayed until clicked.