Deprecated

この API は、将来の React のメジャーバージョンで削除されます。代わりに renderToPipeableStream を使用してください。

renderToNodeStream は、React のツリーを Node.js の Readable ストリームにレンダーします。

const stream = renderToNodeStream(reactNode)

リファレンス

renderToNodeStream(reactNode)

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

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

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

クライアント側では、このようにサーバ生成された HTML を操作可能にするために hydrateRoot を用います。

さらに例を見る

引数

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

返り値

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

注意点

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

  • React 18 時点において、このメソッドはすべての出力をバッファリングするため、実際にはストリームを使用する利点が得られません。これが、代わりに renderToPipeableStream に移行することが推奨される理由です。

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


使用法

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

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

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 を呼び出す必要があります。