renderToPipeableStream
renderToPipeableStream は React ツリーをパイプ可能な Node.js ストリームにレンダーします。
const { pipe, abort } = renderToPipeableStream(reactNode, options?)リファレンス
renderToPipeableStream(reactNode, options?)
renderToPipeableStream を呼び出して、React ツリーを HTML として Node.js ストリームにレンダーします。
import { renderToPipeableStream } from 'react-dom/server';
const { pipe } = renderToPipeableStream(<App />, {
bootstrapScripts: ['/main.js'],
onShellReady() {
response.setHeader('content-type', 'text/html');
pipe(response);
}
});クライアント側では、このようにサーバ生成された HTML を操作可能にするために hydrateRoot を用います。
引数
-
reactNode: HTML へとレンダーしたい React ノード。例えば、<App />のような JSX 要素です。これはドキュメント全体を表すことが期待されているため、Appコンポーネントは<html>タグをレンダーする必要があります。 -
省略可能
options: ストリーム関連のオプションが含まれたオブジェクト。- 省略可能
bootstrapScriptContent: 指定された場合、この文字列がインラインの<script>タグ内に配置されます。 - 省略可能
bootstrapScripts: ページ上に出力する<script>タグに対応する URL 文字列の配列。これを使用して、hydrateRootを呼び出す<script>を含めます。クライアントで React をまったく実行したくない場合は省略します。 - 省略可能
bootstrapModules:bootstrapScriptsと同様ですが、代わりに<script type="module">を出力します。 - 省略可能
identifierPrefix: React がuseIdによって生成する ID に使用する文字列プレフィックス。同じページ上に複数のルートを使用する際に、競合を避けるために用います。hydrateRootにも同じプレフィックスを渡す必要があります。 - 省略可能
namespaceURI: このストリームのルートネームスペース URI 文字列。デフォルトでは通常の HTML です。SVG の場合は'http://www.w3.org/2000/svg'、MathML の場合は'http://www.w3.org/1998/Math/MathML'を渡します。 - 省略可能
nonce:script-srcContent-Security-Policy を用いてスクリプトを許可するためのnonce文字列。 - 省略可能
onAllReady: シェルとすべての追加コンテンツの両方を含むすべてのレンダーが完了したときに呼び出されるコールバック。クローラや静的生成向けの場合に、onShellReadyの代わりに利用できます。ここからストリーミングを開始する場合、プログレッシブなローディングがなくなり、ストリームには最終的な HTML が含まれるようになります。 - 省略可能
onError: サーバエラーが発生するたびに発火するコールバック。復帰可能なエラーの場合もそうでないエラーの場合もあります。デフォルトではconsole.errorのみを呼び出します。これを上書きしてクラッシュレポートをログに記録する場合でもconsole.errorを呼び出すようにしてください。また、シェルが出力される前にステータスコードを調整するためにも使用できます。 - 省略可能
onShellReady: 初期シェルがレンダーされた直後に呼び出されるコールバック。ここでステータスコードのセットを行い、pipeをコールしてストリーミングを開始できます。React はシェルを送信した後に、追加コンテンツと、ローディングフォールバックを追加コンテンツで置換するためのインライン<script>タグをストリーミングします。
- 省略可能