prerender は React ツリーを Web Stream を用いて静的な HTML 文字列にレンダーします。

const {prelude, postponed} = await prerender(reactNode, options?)

補足

この API は Web Streams に依存しています。Node.js では、代わりに prerenderToNodeStream を使用してください。

リファレンス

prerender(reactNode, options?)

prerender を呼び出して、アプリを静的な HTML にレンダーします。

import { prerender } from 'react-dom/static';

async function handler(request, response) {
  const {prelude} = await prerender(<App />, {
    bootstrapScripts: ['/main.js']
  });
  return new Response(prelude, {
    headers: { 'content-type': 'text/html' },
  });
}

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

さらに例を見る

引数

  • reactNode: HTML へとレンダーしたい React ノード。例えば、<App /> のような JSX 要素です。これはドキュメント全体を表すことが期待されているため、App コンポーネントは <html> タグをレンダーする必要があります。

  • 省略可能 options: 静的生成関連のオプションが含まれたオブジェクト。

    • 省略可能 bootstrapScriptContent: 指定された場合、この文字列がインラインの <script> タグ内に配置されます。