renderToStaticNodeStream

const stream = renderToStaticNodeStream(reactNode)

• リファレンス
  • renderToStaticNodeStream(reactNode)
• 使用法
  • React ツリーを静的 HTML として Node.js の Readable ストリームにレンダーする

リファレンス

renderToStaticNodeStream(reactNode)

サーバ上において、renderToStaticNodeStream を呼び出して Node.js の Readable ストリームを取得します。

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

const stream = renderToStaticNodeStream(<Page />);
stream.pipe(response);

さらに例を見る

このストリームは、React コンポーネントの非インタラクティブな HTML 出力を生成します。

引数

• reactNode: HTML にレンダーしたい React ノード。例えば、<Page /> のような JSX 要素。

返り値

HTML 文字列を出力する Node.js の Readable ストリーム。結果として得られる HTML はクライアント上でハイドレーションすることはできません。

注意点

• renderToStaticNodeStream の出力はハイドレーションすることができません。

• このメソッドは、すべてのサスペンスバウンダリが完了するまで出力を返さずに待機します。

• React 18 時点において、このメソッドはすべての出力をバッファリングするため、実際にはストリームを使用する利点が得られません。

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

使用法

React ツリーを静的 HTML として Node.js の Readable ストリームにレンダーする

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

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

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

このストリームは、React コンポーネントの非インタラクティブな初期 HTML 出力を生成します。