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 出力が生成されます。

落とし穴

このメソッドは、ハイドレーションができない非インタラクティブな HTML をレンダーします。これは、React をシンプルな静的ページジェネレータとして使用したい場合や、メールのような完全に静的なコンテンツをレンダーする場合に有用です。

インタラクティブなアプリでは、サーバ上で renderToString を、クライアント上で hydrateRoot を使用すべきです。