【ぶぶんハイドレーション】
部分ハイドレーション とは？
最終更新:
💡 ページの必要な部分だけに、JavaScriptの動作を結びつける
サーバーなどで生成したHTMLのうち、必要なコンポーネントだけをブラウザでハイドレーションする方式。ページ全体に対応するJavaScriptの読み込み・実行を避ける設計に使う。
📌 このページのポイント
- HTMLにコンポーネントのJavaScriptの処理を結びつけるのがハイドレーション
- 部分ハイドレーションは、その対象をページの一部に限定する
- Astroのクライアントアイランドでは、client:*で対象と読み込み・実行のタイミングを指定する
- JavaScriptの負担を減らせるが、実際の速度やCore Web Vitalsの改善は測定して確認する
ひよこ ペンギン先生、「ハイドレーション」って何なの？
ペンギン先生 ひよこ じゃあ「部分」ハイドレーションって、全部やらないってこと？
ペンギン先生 そうだよ。記事本文はHTMLのままにして、検索候補を出すウィジェットなど必要な部分だけを対象にする。対象外のコンポーネント用JavaScriptを送らずに済む設計なんだ。ただしリンクや普通のフォームはHTMLだけでも使えるから、操作できる部分すべてにハイドレーションが必要なわけではないよ。
ひよこ Astroで「client:load」とか書くやつだね！
ペンギン先生 ひよこ どのくらい速くなるの？
ペンギン先生 減らせるJavaScript量や元のページによるので、何倍速いとは決められないよ。Core Web VitalsはLCP・INP・CLSで、TBTはその3指標に含まれない補助的な測定指標なんだ。画像やネットワーク、入力時の処理も影響するので、実際のページで測定しよう。
ひよこ 対象を少なくするほどいいのかな？
ペンギン先生 必要な操作が使えることが前提だよ。どこを独立したコンポーネントにするか、いつ操作可能にするか、部分同士で状態をどう共有するかを考える。対象を一部にする設計と、実行の開始を遅らせる指定は別の観点だから、操作が必要になるタイミングにも合わせよう。
まとめ：ざっくりこれだけ覚えればOK！
「部分ハイドレーション」って出てきたら「必要な部分だけをJavaScriptで活性化する方式」と思えばだいたいOK！
📖 おまけ：英語の意味
「Partial Hydration」 ＝ 部分的なハイドレーション。Hydrationの直訳は水分補給
💬 この分野では、生成済みのHTMLにコンポーネントの動作を結びつけることをHydrationと呼ぶよ。Partialはその対象を一部に限定するという意味なんだ。