renderToStaticMarkup
renderToStaticMarkup
は、非インタラクティブな React ツリーを HTML 文字列にレンダーします。
const html = renderToStaticMarkup(reactNode, options?)
リファレンス
renderToStaticMarkup(reactNode, options?)
サーバ上において、renderToStaticMarkup
を呼び出してアプリを HTML にレンダーします。
import { renderToStaticMarkup } from 'react-dom/server';
const html = renderToStaticMarkup(<Page />);
これにより、React コンポーネントの非インタラクティブな HTML 出力が生成されます。
引数
reactNode
: HTML にレンダーしたい React ノード。例えば、<Page />
のような JSX ノード。- 省略可能
options
: サーバレンダー用のオプションが含まれたオブジェクト。- 省略可能
identifierPrefix
: React がuseId
によって生成する ID に使用する文字列プレフィックス。同じページ上に複数のルートを使用する際に、競合を避けるために用います。
- 省略可能
返り値
HTML 文字列。
注意点
-
renderToStaticMarkup
の出力に対してハイドレーションは行えません。 -
renderToStaticMarkup
のサスペンスに対するサポートは限定的です。コンポーネントがサスペンドすると、renderToStaticMarkup
はそのフォールバックを HTML として直ちに出力します。 -
renderToStaticMarkup
はブラウザで動作しますが、クライアントコードでの使用は推奨されません。ブラウザでコンポーネントを HTML にレンダーする必要がある場合は、DOM ノードにレンダーしてその HTML を取得してください。
使用法
非インタラクティブな React ツリーを HTML として文字列にレンダーする
renderToStaticMarkup
を呼び出して、あなたのアプリを、サーバからのレスポンスとして送信できる HTML 文字列にレンダーします。
import { renderToStaticMarkup } from 'react-dom/server';
// The route handler syntax depends on your backend framework
app.use('/', (request, response) => {
const html = renderToStaticMarkup(<Page />);
response.send(html);
});
これにより、React コンポーネントの非インタラクティブな初期 HTML 出力が生成されます。