renderToString

const html = renderToString(reactNode)

• リファレンス
  • renderToString(reactNode)
• 使用法
  • React ツリーを HTML として文字列にレンダーする
• 代替手�?�
  • サーバ上で renderToString からストリーム対応メソッドへ�?移行
  • クライアントコードから renderToString を削除する
• トラブルシューティング
  • コンポーネントがサスペンドすると HTML に常にフォールバックが含まれる

リファレンス

renderToString(reactNode)

サーバ上において、renderToString を呼び出してあなた�?アプリを HTML にレンダーします。

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

const html = renderToString(<App />);

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

さらに例を見る

引数

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

返り値

HTML 文字列。

注意点

• renderToString �?サスペンスに対するサポートは限�?�的です。コンポーネントがサスペンドすると、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 出力が生成されます。クライアント側では、サーバーが生成した HTML �?ハイドレーションを行い操作可能にするために、hydrateRoot を呼び出す必要があります。

代替手�?�

サーバ上で renderToString からストリーム対応メソッドへ�?移行

renderToString は直ちに文字列を返すため、ストリーミングやデータ�?待機をサポートしていません。

可能な場合、全機能を備えた以下�?代替手�?��?使用を推奨します。

• Node.js を使用している場合は、renderToPipeableStream を使用します。
• Deno や、Web Stream をサポートするモダンなエッジランタイムを使用している場合は、renderToReadableStream を使用します。

サーバ環境がストリームをサポートしていない場合は、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>"

flushSync �?呼び出しは、innerHTML プロパティを読み取る前に DOM が更新されるようにするために必要です。

トラブルシューティング

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

renderToString はサスペンスを�?�全にはサポートしていません。

何らか�?コンポーネントが（lazy で�?�義されている、データをフェッチしているなど�?理由で）サスペンドした場合、renderToString はそ�?コンテンツがロードされる�?を待ちません。代わりに、renderToString はそ�?上にある最も近い <Suspense> バウンダリを見つけ、そ�? fallback を HTML にレンダーします。コンテンツは、クライアントでコードがロードされるまで表示されません。

これを解決するには、ストリーミング対応�?推奨ソリューション�?いずれかを使用します。これらは、サーバ上でコンテンツがロードされるにつれて分割してコンテンツをストリームするため、クライアントコードがロードされる前に、ユーザはページが徐々に埋まっていくところを見ることができます。