注意点

renderToString はストリーミングやデータの待機をサポートしていません。代替案を参照してください。

renderToString はReactツリーをHTML文字列にレンダリングします。

const html = renderToString(reactNode, options?)

リファレンス

renderToString(reactNode, options?)

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

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

const html = renderToString(<App />);

クライアントでは、サーバー生成のHTMLをインタラクティブにするためにhydrateRootを呼び出します。

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

パラメーター

  • reactNode: HTMLにレンダリングしたいReactノード。例えば、<App />のようなJSXノード。

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

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

戻り値

HTML文字列。

注意事項

  • renderToStringはSuspenseのサポートが限定的です。コンポーネントがサスペンドした場合、renderToStringはただちにフォールバックをHTMLとして送信します。

  • renderToStringはブラウザで動作しますが、クライアントコードで使用することは推奨されません。

使用方法

ReactツリーをHTML文字列としてレンダリングする

renderToStringを呼び出してアプリをHTML文字列にレンダリングし、サーバーレスポンスで送信します。

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

// The route handler syntax depends on your backend framework
app.use('/', (request, response) => {
  const html = renderToString(<App />);
  response.send(html);
});

これにより、Reactコンポーネントの初期の非インタラクティブなHTML出力が生成されます。クライアント側では、hydrateRootを呼び出して、サーバーで生成されたHTMLを*ハイドレート*し、インタラクティブにする必要があります。

注意点

renderToString はストリーミングやデータの待機をサポートしていません。代替案を参照してください。

代替案

renderToStringからのサーバーでのストリーミングレンダリングへの移行

renderToStringはすぐに文字列を返すため、ロード中のコンテンツのストリーミングをサポートしていません。

可能な限り、これらのフル機能の代替案を使用することをお勧めします。

サーバー環境がストリームをサポートしていない場合は、renderToStringを引き続き使用できます。

renderToStringからのサーバーでの静的プリレンダリングへの移行

renderToStringはすぐに文字列を返すため、静的HTML生成のためにデータのロードを待つことはできません。

これらのフル機能の代替案を使用することをお勧めします。

静的サイト生成環境がストリームをサポートしていない場合は、renderToStringを引き続き使用できます。

クライアントコードからrenderToStringを削除する

場合によっては、renderToStringはクライアント側でコンポーネントをHTMLに変換するために使用されます。

// 🚩 Unnecessary: using renderToString on the client
import { renderToString } from 'react-dom/server';

const html = renderToString(<MyIcon />);
console.log(html); // For example, "<svg>...</svg>"

クライアントでreact-dom/serverをインポートすると、バンドルサイズが不必要に増加するため、避けるべきです。ブラウザでコンポーネントをHTMLにレンダリングする必要がある場合は、createRootを使用し、DOMからHTMLを読み取ります。

import { createRoot } from 'react-dom/client';
import { flushSync } from 'react-dom';

const div = document.createElement('div');
const root = createRoot(div);
flushSync(() => {
  root.render(<MyIcon />);
});
console.log(div.innerHTML); // For example, "<svg>...</svg>"

DOM の flushSync 呼び出しは、その innerHTML プロパティを読み取る前に DOM を更新するために必要です。

トラブルシューティング

コンポーネントがサスペンドすると、HTML には常にフォールバック が含まれています。

renderToString は Suspense を完全にサポートしていません。

コンポーネントがサスペンドする場合（たとえば、lazy で定義されているか、データのフェッチを行う場合）、renderToString はそのコンテンツの解決を待ちません。代わりに、renderToString は、その上に最も近い <Suspense> バウンダリを見つけ、その fallback プロップを HTML にレンダリングします。コンテンツは、クライアントコードがロードされるまで表示されません。

これを解決するには、推奨されるストリーミングソリューションのいずれか を使用します。サーバーサイドレンダリングの場合、サーバー上で解決されるにつれてチャンク単位でコンテンツをストリーミングできるため、クライアントコードがロードされる前にページが段階的に表示されます。静的サイト生成の場合、すべてのコンテンツが解決されるまで待ってから静的 HTML を生成できます。

前へrenderToStaticMarkup
次へ静的API