部分的ハイドレーション

サーバーサイドレンダリング(SSR)で生成されたHTMLに対して、インタラクティブな部分だけにJavaScriptを適用するパフォーマンス最適化手法。

ハイドレーションとは

SSRではサーバーがHTMLを生成してブラウザに送る。しかし、Reactなどのフレームワークではクライアント側でJavaScriptを実行し、静的なHTMLにイベントハンドラやリアクティビティを「注水(hydrate)」する必要がある。この処理がハイドレーション。

部分的ハイドレーションの種類

手法 説明
Partial Hydration インタラクティブなコンポーネントだけにJSを適用
Selective Hydration 画面に見えている部分から優先的にハイドレート
Progressive Hydration 必要になった時点でハイドレートを遅延実行

Islands Architectureとの関係

Islands ArchitectureはPartial Hydrationを設計パターンとして体系化したもの。静的部分と動的部分の境界を明示的にコンポーネントレベルで宣言する。

関心の分離との対応

部分的ハイドレーションは、「インタラクティブが必要かどうか」という関心をコンポーネント単位で分離することを強制する。これにより、本質的複雑性と偶有的複雑性の観点から、全体のJSバンドルサイズという偶有的コストを削減できる。

関連