unstable_RSCHydratedRouter

この API は実験的なものであり、マイナーリリースやパッチリリースで破壊的変更が行われる可能性があります。使用する際は注意し、関連する変更についてはリリースノートに非常に注意してください。

概要

ブラウザでサーバーレンダリングされた unstable_RSCPayload をハイドレートします。

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",
  getContext,
}: RSCHydratedRouterProps)

Props

createFromReadableStream

サーバーからの payload をデコードするために使用される、react-server-dom-xyz/client の createFromReadableStream 関数です。

fetch

オプションの fetch の実装です。デフォルトはグローバルな fetch です。

getContext

クライアントの action、loader、および middleware に context 引数として提供される、RouterContextProvider インスタンスを返す関数です。この関数は、ナビゲーションまたはフェッチャーの呼び出しごとに新しい context インスタンスを生成するために呼び出されます。

payload

ハイドレートするデコードされた unstable_RSCPayload です。

routeDiscovery

"eager" または "lazy" - リンクが積極的に発見されるか、クリックされるまで遅延されるかを決定します。

概要
シグネチャ
Props
createFromReadableStream
fetch
getContext
payload
routeDiscovery