React Router v7 ドキュメント 日本語版

English

unstable_routeRSCServerRequest



この API は実験的であり、マイナー/パッチリリースで破壊的変更が加えられる可能性があります。使用には注意を払い、関連する変更についてはリリースノートに非常に注意を払ってください。

概要

リファレンスドキュメント ↗

受信した Request を RSC サーバーにルーティングし、データ/リソースリクエストに対してはサーバー Response を適切にプロキシするか、ドキュメントリクエストに対しては HTML をレンダーします。

import { createFromReadableStream } from "@vitejs/plugin-rsc/ssr";
import * as ReactDomServer from "react-dom/server.edge";
import {
  unstable_RSCStaticRouter as RSCStaticRouter,
  unstable_routeRSCServerRequest as routeRSCServerRequest,
} from "react-router";
 
routeRSCServerRequest({
  request,
  serverResponse,
  createFromReadableStream,
  async renderHTML(getPayload) {
    const payload = getPayload();
 
    return await renderHTMLToReadableStream(
      <RSCStaticRouter getPayload={getPayload} />,
      {
        bootstrapScriptContent,
        formState: await payload.formState,
      }
    );
  },
});

シグネチャ

async function routeRSCServerRequest({
  request,
  serverResponse,
  createFromReadableStream,
  renderHTML,
  hydrate = true,
}: {
  request: Request;
  serverResponse: Response;
  createFromReadableStream: SSRCreateFromReadableStreamFunction;
  renderHTML: (
    getPayload: () => DecodedPayload,
    options: {
      onError(error: unknown): string | undefined;
      onHeaders(headers: Headers): void;
    },
  ) => ReadableStream<Uint8Array> | Promise<ReadableStream<Uint8Array>>;
  hydrate?: boolean;
}): Promise<Response>

パラメータ

opts.createFromReadableStream

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

opts.serverResponse

シリアライズされた unstable_RSCPayload を含む、RSC ハンドラーによって生成された Response または部分的な Response です。

opts.hydrate

サーバー Response を RSC ペイロードでハイドレートするかどうか。デフォルトは true です。

opts.renderHTML

unstable_RSCPayload を HTML にレンダーする関数で、通常は <RSCStaticRouter> を使用します。

opts.request

ルーティングする Request です。

戻り値

データリクエストのための RSC ペイロードを含んでいるか、またはドキュメントリクエストのための HTML をレンダーする Response です。