【ぶぶんハイドレーション】
部分ハイドレーション とは？
公開:
💡 植物の「必要な根だけ」に水をやるページ最適化
📌 このページのポイント
- 静的な部分にはJSを送らず、動く必要がある「島」にだけJSを適用する
- Astroが採用した「アイランドアーキテクチャ」が部分ハイドレーションの代表例
- JavaScriptバンドルサイズを大幅に削減し、Core Web Vitalsの改善に直結する
- React Server ComponentsやQwikも同様の思想で設計されている
ひよこ ペンギン先生、「ハイドレーション」って何なの？
ペンギン先生 ひよこ じゃあ「部分」ハイドレーションって、全部やらないってこと？
ペンギン先生 ひよこ Astroで「client:load」とか書くやつだね！
ペンギン先生 まさにそれだよ。Astroは「アイランドアーキテクチャ」という名前でこの概念を実装していて、`client:load`、`client:idle`、`client:visible`などのディレクティブで、いつどのコンポーネントをハイドレーションするかを細かく制御できるんだ。
ひよこ どのくらい速くなるの？
ペンギン先生 JSバンドルが劇的に減るから、LCP（最大コンテンツの描画）やTBT（合計ブロック時間）などのCore Web Vitalsが改善しやすいよ。ブログや企業サイトなど「読むだけ」のコンテンツが多いサイトでは特に効果が大きいんだ。
ひよこ 全部のサイトに使えばいいんじゃないの？
まとめ：ざっくりこれだけ覚えればOK！
「部分ハイドレーション」って出てきたら「動く部分だけにJSを当てる最適化」と思えればだいたいOK！
📖 おまけ：英語の意味
「Partial Hydration」 ＝ 部分的な水分補給・部分的な活性化
💬 「Hydration（ハイドレーション）」はHTMLに対してJavaScriptを「注入して動かせる状態にする」プロセスを指すんだ。水に濡れることで乾燥した植物が生き返るイメージから来ているよ