完全ハイドレーションの問題

ハイドレーションとは、ReactがサーバーでレンダリングされたHTMLにJavaScriptのイベントリスナーを追加するプロセスです。サーバーが初期HTMLを高速に送信した後、ブラウザーがJavaScriptバンドルをダウンロードし、Reactが静的なHTMLを「ハイドレーション」して操作可能にします。ハイドレーションが完了するまでは、ページが操作できそうに見えても、実際には操作できません。

従来のシングルページアプリケーションは、JavaScriptバンドル全体をブラウザーに送信します。Reactはそれをダウンロード、解析、実行した後、ツリー内のすべてのコンポーネントにイベントリスナーを追加する必要があります。大規模なアプリケーションでは、中価格帯のモバイル端末でこの処理に数秒かかることがあります。

Time To Interactiveは、ユーザーがページを操作できるようになるまでの時間を測定します。ハイドレーションはTTIを直接遅らせます。ページは準備が整ったように見えても（サーバーでレンダリングされたHTMLは表示されています）、Reactがイベントリスナーの追加を終えるまで、ボタンやフォームは反応しません。TTIが高いと、ユーザー体験は低下します。

マーケティングページを考えてみましょう。コンテンツの80%は、変化することのない静的なテキスト、画像、見出しです。インタラクティブなのは、ニュースレターフォームや動画プレーヤーなどのウィジェットにあたる20%だけです。それでも従来のSPAのハイドレーションでは、静的なコンポーネントまで含め、ページ全体の100%が処理されます。

Chrome DevToolsのパフォーマンスプロファイリングを使うと、ハイドレーションのコストを確認できます。Mainスレッドのウォーターフォールでは、初回ペイントの後にある長いJavaScript実行ブロックとして「React hydration」タスクを特定できます。このブロックが長いほど、Mainスレッドが占有される時間が増え、ページの応答性が低下します。

Reactのコンポーネントツリーが大きいほど、ハイドレーションに必要な処理も増えます。Reactはすべてのコンポーネントを調べ、サーバーでレンダリングされたHTMLと、そのコンポーネントがレンダリングする内容を比較し、イベントリスナーを追加する必要があります。コンポーネントが何百個もある複雑なページでは、高速な端末でもハイドレーションのオーバーヘッドが無視できない場合があります。

React 18では並行ハイドレーションが導入され、ハイドレーションを小さな単位に分割し、その合間にブラウザーへ処理を譲れるようになりました。これにより、大規模なツリーのハイドレーション中でも、ブラウザーが完全にフリーズしたように見える状態を防げます。ただし、並行ハイドレーションは影響を小さくするだけで、根本的なコストをなくすものではありません。

選択的ハイドレーション（Suspenseを介して使用）を利用すると、Reactは優先度の高い順にコンポーネントをハイドレーションできます。ユーザーが操作すると、該当するコンポーネントのハイドレーションがすぐに開始されます。これにより応答性は向上しますが、処理は依然として1つのReactツリー内で行われるため、ツリー内のすべてのコンポーネントが最終的にはハイドレーションされます。

Islands Architectureを支える根本的な気づきは、一般的なページの大部分には、そもそもJavaScriptが必要ないということです。ナビゲーションバー、ヒーローセクション、フッターのリンク、ブログ記事のテキスト、商品の説明は、純粋に表示するだけの要素です。これらにハイドレーションを強制するのは、定義上無駄な処理です。

Webパフォーマンスチームの調査では、JavaScriptの解析と実行にかかる時間が、モバイル端末での主なコストであることが示されています。JavaScriptバンドルが300kbある場合、平均的なAndroidスマートフォンでは解析に2〜3秒かかります。ブラウザーに送信するJavaScriptを減らすことは、React内部の最適化よりもはるかに大きなパフォーマンス向上につながります。

ReactアプリケーションにJavaScriptを1キロバイト追加するたびに、ハイドレーションの処理も増えます。コンポーネントが装飾だけを目的とするものであっても、Reactツリーに含まれていればハイドレーションに参加します。この「ハイドレーション税」はアプリケーションの規模に応じて増大し、アプリケーションが成長するほど良好なTTIスコアを維持することが難しくなります。

ReactのハイドレーションとTime To Interactive（TTI）には、どのような関係がありますか？

従来のReactのハイドレーションでは、JavaScriptを必要としない静的コンテンツも含め、コンポーネントツリー全体を処理します。これによりTime To Interactiveが遅延し、アプリケーションの規模に応じて処理が増大します。React 18の並行ハイドレーションと選択的ハイドレーションによる改善は影響を小さくしますが、根本的なコストをなくすものではありません。重要な点は、ページの大部分にはそもそもJavaScriptが必要なく、ページ全体のハイドレーションは無駄だということです。