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) },
);
}),
);
function RSCHydratedRouter({
createFromReadableStream,
fetch: fetchImplementation = fetch,
payload,
routeDiscovery = "eager",
unstable_getContext,
}: RSCHydratedRouterProps)
Your react-server-dom-xyz/client
's createFromReadableStream
function,
used to decode payloads from the server.
Optional fetch implementation. Defaults to global fetch
.
A function that returns an unstable_RouterContextProvider
instance
which is provided as the context
argument to client action
s,
loader
s and middleware.
This function is called to generate a fresh context
instance on each
navigation or fetcher call.
The decoded unstable_RSCPayload
to hydrate.
"eager"
or "lazy"
- Determines if links are eagerly discovered, or
delayed until clicked.