renderToStaticNodeStream

const stream = renderToStaticNodeStream(reactNode, options?)

• リファレンス
  • renderToStaticNodeStream(reactNode, options?)
• 使用法
  • Reactツリーを静的なHTMLとしてNode.js Readable Streamにレンダリングする

リファレンス

renderToStaticNodeStream(reactNode, options?)

サーバー側で、renderToStaticNodeStreamを呼び出して、Node.js Readable Streamを取得します。

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

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

以下の例をもっと見てください。

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

パラメータ

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

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

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

戻り値

HTML文字列を出力するNode.js Readable Stream。生成されたHTMLはクライアントでハイドレートできません。

注意点

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

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

• React 18 の時点では、このメソッドはすべての出力をバッファリングするため、実際にはストリーミングの利点は提供しません。

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

使用法

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

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

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出力を生成します。