renderToStaticMarkup

const html = renderToStaticMarkup(reactNode, options?)

• リファレンス
  • renderToStaticMarkup(reactNode, options?)
• 使用方法
  • 非インタラクティブなReactツリーをHTMLとして文字列にレンダリングする

リファレンス

renderToStaticMarkup(reactNode, options?)

サーバー側では、アプリケーションをHTMLにレンダリングするためにrenderToStaticMarkupを呼び出します。

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

const html = renderToStaticMarkup(<Page />);

これにより、Reactコンポーネントの非インタラクティブなHTML出力が生成されます。

下記にさらに例を示します。

パラメーター

• reactNode: HTMLにレンダリングするReactノード。例えば、<Page />のようなJSXノード。
• オプション options: サーバーレンダリングのためのオブジェクト。
  • オプション identifierPrefix: useId が生成するIDにReactが使用する文字列プレフィックス。同じページで複数のルートを使用する場合の競合を避けるのに役立ちます。

戻り値

HTML文字列。

注意点

• renderToStaticMarkup の出力はハイドレートできません。

• renderToStaticMarkup のSuspenseサポートは限定的です。コンポーネントがサスペンドした場合、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出力が生成されます。