renderToNodeStream

const stream = renderToNodeStream(reactNode, options?)

• リファレンス
  • renderToNodeStream(reactNode, options?)
• 使用方法
  • ReactツリーをHTMLとしてNode.jsのReadableストリームにレンダリングする

リファレンス

renderToNodeStream(reactNode, options?)

サーバー側では、`renderToNodeStream` を呼び出して、レスポンスにパイプできる Node.js Readableストリーム を取得します。

import { renderToNodeStream } from 'react-dom/server';

const stream = renderToNodeStream(<App />);
stream.pipe(response);

クライアント側では、hydrateRoot を呼び出して、サーバーで生成されたHTMLをインタラクティブにします。

以下の例をご覧ください。

パラメータ

• reactNode: HTMLにレンダリングするReactノード。たとえば、<App /> のようなJSX要素。

• **オプション** options: サーバーレンダリング用のオブジェクト。

  • **オプション** identifierPrefix: Reactが useId によって生成されたIDに使用する文字列プレフィックス。同じページで複数のルートを使用する場合の競合を回避するのに役立ちます。hydrateRoot に渡されるプレフィックスと同じでなければなりません。

戻り値

HTML文字列を出力する Node.js Readableストリーム。

注意事項

• このメソッドは、すべての Suspense境界 が完了するまで待ってから、出力を返します。

• React 18 以降、このメソッドはすべての出力をバッファリングするため、実際にはストリーミングの利点は提供されません。そのため、代わりに renderToPipeableStream に移行することをお勧めします。

• 返されるストリームは、utf-8 でエンコードされたバイトストリームです。別のエンコーディングのストリームが必要な場合は、テキストのトランスコーディングのための変換ストリームを提供する iconv-lite のようなプロジェクトを参照してください。

使用方法 ...

React ツリーを HTML として Node.js の Readable Stream にレンダリングする ...

renderToNodeStream を呼び出すと、サーバーレスポンスにパイプできる Node.js Readable Stream が取得されます。

import { renderToNodeStream } from 'react-dom/server';

// The route handler syntax depends on your backend framework
app.use('/', (request, response) => {
  const stream = renderToNodeStream(<App />);
  stream.pipe(response);
});

ストリームは、React コンポーネントの初期の非インタラクティブな HTML 出力を生成します。クライアント側では、サーバーで生成された HTML を *ハイドレート* し、インタラクティブにするために、hydrateRoot を呼び出す必要があります。