選択的ハイドレーションによるプログレッシブハイドレーション

選択的ハイドレーションは React 18 の機能で、ページ全体の JavaScript のダウンロードを待たず、JavaScript コードが到着したコンポーネントからハイドレーションを開始できます。コード分割された各セクションは、すべて一度にではなく、バンドルの読み込みに合わせてハイドレーションされます。

React 18 より前は、ハイドレーションは「すべてかゼロか」でした。React はすべての JavaScript をダウンロードし、ツリー全体をハイドレーションしてからでなければ、ページのどの部分もインタラクティブにできませんでした。React 18 ではこの制約がなくなり、コードとデータが利用可能になった部分からツリーを独立してハイドレーションできます。

まだハイドレーションされていない Suspense 境界をユーザーがクリックまたは操作すると、React は他の保留中のハイドレーション処理よりも先に、そのサブツリーのハイドレーションを直ちに優先します。これにより、ドキュメント内の順序に関係なく、ユーザーが使おうとしている部分を最初にインタラクティブにできます。

React.lazy と動的インポート、Suspense 境界を組み合わせると、コード分割されたコンポーネントで選択的ハイドレーションを利用できます。ブラウザは最初にメイン JS バンドルをダウンロードし、シェルを直ちにハイドレーションします。各遅延読み込みコンポーネントは、ブラウザがチャンクを取得すると順次ハイドレーションされます。

その結果、ファーストビューのコンテンツは、ファーストビューより下の JavaScript がダウンロードされる前にインタラクティブになります。コメントフィードとレコメンデーションウィジェットがまだ JavaScript チャンクを読み込んでいる間でも、ユーザーはナビゲーションやヒーローの CTA を操作できます。

選択的ハイドレーションは、ハイドレーションのパフォーマンスにおける重要な指標である Total Blocking Time（TBT）を短縮します。Chrome DevTools の Performance タブでは、Long Tasks（50ms を超えるタスク）が赤色で強調表示されます。選択的ハイドレーションの導入前は、ハイドレーション全体による 300ms の Long Task が 1 つ表示されることがあります。導入後は、時間をずらして実行される小さなタスクが複数表示されます。

選択的ハイドレーションを損なうアンチパターンは、アプリの先頭ですべてのコンポーネントをインポートすることです。たとえば、import Footer from './Footer' です。これにより、ハイドレーションが始まる前に、ブラウザは Footer のコードをダウンロード、解析、実行することになります。ファーストビューより下にあるコンポーネントのトップレベルインポートを、React.lazy と動的インポートに置き換えてください。

初期ビューポートより下に表示されるコンポーネントには、const Footer = React.lazy(() => import('./Footer')) を使用します。それらをシンプルなフォールバックとともに Suspense で囲みます。ブラウザはファーストビューのハイドレーションが完了するまで Footer のバンドル取得の優先度を下げるため、TBT が自然に改善されます。

ストリーミングと選択的ハイドレーションは相補的な技術です。ストリーミングは HTML チャンクを送信して FCP と LCP を改善し、選択的ハイドレーションは JavaScript チャンクを処理して TTI と TBT を改善します。両者を組み合わせることで、「コンテンツをすぐに表示する」と「すぐに操作可能にする」という、パフォーマンスにおける両方の側面に対応できます。

React Server Components は選択的ハイドレーションをさらに推し進めます。サーバーコンポーネントはクライアント向けの JavaScript を一切生成しません。ハイドレーションが必要なのは、「use client」でマークされたクライアントコンポーネントだけです。ハイドレーションが必要な JavaScript の総量が減るため、選択的ハイドレーションの効果がさらに高まります。

実践的なパターンは、ストリーミング HTML に renderToPipeableStream を使い、createRoot ではなくルートの hydrateRoot 呼び出しでページをラップしてハイドレーションモードを有効にし、ファーストビューより下のすべてのセクションに React.lazy を使い、各セクションを Suspense 境界で囲むことです。残りは React が自動的に処理します。

React 18 では、ユーザー操作は選択的ハイドレーションの優先度にどのような影響を与えますか？

選択的ハイドレーションを使うと、完全なバンドルを待つのではなく、JavaScript が到着したコンポーネントのサブツリーから React が段階的にハイドレーションできます。ユーザー操作は、対象となるサブツリーのハイドレーションを優先します。ファーストビューより下のコンテンツに React.lazy と動的インポートを使い、Suspense 境界と組み合わせることで、この段階的なパターンを実現できます。選択的ハイドレーションとストリーミング SSR は相補的な技術であり、コンテンツ配信とインタラクティブ性のパフォーマンスの両方に対応します。