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

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.