Suspense境界とストリーミングの優先度

Suspense 境界は、ストリーミングの粒度を決める基本単位です。コンポーネントツリー内の各 Suspense 境界は、独立してストリーミングできるセクションを作成します。React は他の境界の状態に関係なく、各境界をそれぞれのペースで解決してストリーミングできます。

シェルは、Suspense 境界の外側にあるすべての要素で構成されます。レイアウト、ナビゲーション、フッター、そして同期的に利用できるコンテンツなどです。シェルは最初に高速でストリーミングされるため、データに依存するセクションがバックグラウンドで読み込まれている間も、ユーザーはすぐにページの構造を確認できます。

React がシェルをストリーミングするとき、データがまだ利用できない Suspense 境界は、フォールバック UI としてレンダリングされます。通常はローディング用のスケルトンやスピナーです。このフォールバックは初期 HTML レスポンスに含まれるため、ユーザーは空白ではなく、すぐに読み込みインジケーターを確認できます。

Suspense 境界のデータが解決されると、React は解決済みの HTML と小さなインラインスクリプトをストリーミングします。そのスクリプトは、新しくストリーミングされたコンテンツを非表示の template 要素から DOM の正しい位置へ移動し、ページ全体を再読み込みすることなくフォールバックを置き換えます。

React は HTML の template 要素を使うパターンを採用しています。解決済みの Suspense コンテンツを非表示の template にストリーミングし、その後スクリプトが React の内部関数を呼び出して、template のコンテンツを DOM の正しい位置に入れ替えます。これにより、追加の JS フレームワークコードなしで DOM を置き換えられます。

ネストした Suspense 境界には、それぞれ独立した解決のタイムラインがあります。内側の Suspense 境界は外側の境界より先に解決することがあり、外側の境界が解決済みかどうかに関係なく、React は内側のコンテンツを準備でき次第ストリーミングします。これにより、データ読み込みの並列性が最大化されます。

効果的な Suspense の配置では、時間のかかるデータ依存コンポーネントを Suspense 境界の内側に置き、高速で静的、または同期的に利用できるコンテンツを外側に置きます。ナビゲーションバー、静的なテキストを含むヒーローセクション、フッターは外側に配置します。商品一覧、ユーザーダッシュボード、コメントフィードは内側に配置します。

React は Suspense 境界が解決した順にストリーミングするため、必ずしもドキュメント内の順序になるとは限りません。必要なデータが少なければ、ファーストビューより下のセクションがファーストビューのセクションより先に解決することもあります。ストリーミングの順序に関係なく、React は DOM への挿入を正しく処理します。

React 18 の選択的ハイドレーションはユーザー操作に応答します。まだハイドレーションされていない Suspense 境界をユーザーがクリックまたはホバーすると、React はその境界のハイドレーションを最優先します。これにより、ページの他の部分がまだハイドレーション中でも、ユーザー操作にすぐ応答できます。

Suspense 境界を増やすとストリーミングの柔軟性は高まりますが、多すぎるとインラインの置き換えスクリプトによるオーバーヘッドが増加します。実用上の目安として、個々のコンポーネントではなく、「セクション」全体（ファーストビューのコンテンツ、サイドバー、ファーストビューより下のフィード）を囲みます。1～3 個の Suspense 境界をページごとに配置するのが、一般的にバランスのよい範囲です。

Chrome DevTools の Network タブで「Preserve log」を使用し、レスポンスのストリーミングを観察します。HTML ドキュメントがチャンク単位で大きくなっていくことを確認できます。Performance タブには FCP と LCP のマーカーが表示されるため、ストリーミング版と非ストリーミング版のビルドを比較して改善効果を数値化できます。Fast 3G にスロットルすると、効果をより明確に確認できます。

ストリーミングされる初期 HTML レスポンスでは、Suspense 境界のフォールバックはどうなりますか？

Suspense 境界は、React ツリーを独立してストリーミングできるセクションに分割します。シェル（Suspense の外側）が最初にストリーミングされ、保留中の境界にはフォールバックがすぐに表示され、解決済みのコンテンツがインラインスクリプトによってフォールバックと置き換えられます。ネストした境界には独立したタイムラインがあります。最適なストリーミング粒度を得るには、セクション単位で境界を配置し、操作を起点とするハイドレーションの順序は React の優先度システムに任せてください。