Hydration（ハイドレーション）

概要

Hydration では React がサーバー生成の DOM ツリーと仮想 DOM を照合（reconciliation）し、イベントリスナーを付与します。Hydration に時間がかかると TTI（Time to Interactive）が遅延します。RSC を使うとサーバーのみで動くコンポーネントは Hydration が不要となり、クライアント JS を削減できます。

Partial Hydration と Islands

Astro の Islands Architecture や Qwik の Resumability など、必要な部分のみを Hydrate するアプローチが注目されています。これにより初期 JS ペイロードを大幅に削減し、Core Web Vitals の INP を改善できます。