部分的ハイドレーション
サーバーサイドレンダリング(SSR)で生成されたHTMLに対して、インタラクティブな部分だけにJavaScriptを適用するパフォーマンス最適化手法。
ハイドレーションとは
SSRではサーバーがHTMLを生成してブラウザに送る。しかし、Reactなどのフレームワークではクライアント側でJavaScriptを実行し、静的なHTMLにイベントハンドラやリアクティビティを「注水(hydrate)」する必要がある。この処理がハイドレーション。
部分的ハイドレーションの種類
| 手法 | 説明 |
|---|---|
| Partial Hydration | インタラクティブなコンポーネントだけにJSを適用 |
| Selective Hydration | 画面に見えている部分から優先的にハイドレート |
| Progressive Hydration | 必要になった時点でハイドレートを遅延実行 |
Islands Architectureとの関係
Islands ArchitectureはPartial Hydrationを設計パターンとして体系化したもの。静的部分と動的部分の境界を明示的にコンポーネントレベルで宣言する。
関心の分離との対応
部分的ハイドレーションは、「インタラクティブが必要かどうか」という関心をコンポーネント単位で分離することを強制する。これにより、本質的複雑性と偶有的複雑性の観点から、全体のJSバンドルサイズという偶有的コストを削減できる。