サンプルコードで身につける: インクリメンタルハイドレーション — 必要な所から順に起こす

解説で学んだ概念を、5つの具体例で確認します。素朴な例から実務寄りの例へと進みます。

1設定とテンプレートの2点セット

インクリメンタルハイドレーションは、app.config.tsへの設定追加と、テンプレートのhydrateトリガーの2つで動きます。@deferの構文に「hydrate on ...」が加わっただけ、と覚えると簡単です。

// 1. app.config.ts に withIncrementalHydration() を追加
import {
  provideClientHydration,
  withIncrementalHydration,
} from '@angular/platform-browser';

export const appConfig = {
  providers: [
    provideClientHydration(withIncrementalHydration()),
  ],
};

// 2. テンプレートで hydrate トリガーを書く
// @defer (hydrate on viewport) {
//   <app-review-list />
// }

2hydrate トリガーの一覧

目覚めのきっかけは部品の性質に合わせて選びます。@deferのon viewportなどと同じ語彙ですが、意味は「読み込む」ではなく「ハイドレートする」に変わっています。

// ── hydrate トリガーの使い分け ──
//
// hydrate on viewport     画面に入ったら
//   → ページ下部の一覧・フッター近くの部品
//
// hydrate on idle         ブラウザの手が空いたら
//   → 急がないが、いずれ動いてほしい部品
//
// hydrate on interaction  クリックや入力があったら
//   → コメント欄・検索ボックスなど操作されて初めて動く部品
//
// hydrate on hover        マウスが乗ったら
//   → メニュー・ツールチップ
//
// hydrate never           ずっと起こさない
//   → 表示するだけで操作の無い部品(静的なフッター等)

3@defer 単体との見え方の違い

同じ@deferでも、hydrateトリガーの有無で初期表示が大きく変わります。SSRと組み合わせるなら、見た目が最初から揃っているhydrate付きが本命です。

// ── @defer 単体(hydrate なし)──
// @defer (on viewport) {
//   <app-review-list />
// } @placeholder { <p>読み込み中...</p> }
//
// SSRでもプレースホルダが出力される
// → 画面に入るまでレビューは「見えない」

// ── hydrate 付き ──
// @defer (hydrate on viewport) {
//   <app-review-list />
// }
//
// SSRで完成したレビュー一覧がHTMLに入っている
// → 最初から「見えている」。画面に入ったら動き出す

4ページを部品ごとに設計する例

商品ページ全体を「いつ動く必要があるか」で分類した例です。即時に動くのはヘッダーだけで、残りは必要になるまで寝かせます。初期に読むJSが大幅に減ります。

// 商品詳細ページのテンプレート設計
//
// <app-header />                    <!-- 即時: 検索やカートが使える -->
// <app-product-info />              <!-- 即時: 購入ボタンがある -->
//
// @defer (hydrate on viewport) {
//   <app-review-list />             <!-- スクロールで見えたら -->
// }
//
// @defer (hydrate on interaction) {
//   <app-qa-form />                 <!-- 書き込もうとしたら -->
// }
//
// @defer (hydrate never) {
//   <app-footer />                  <!-- リンクだけなので寝たまま -->
// }

5効果をDevToolsで確かめる

本当にJSが遅延されているかは、NetworkタブとPerformanceタブで確認できます。デバッグのセクションで学んだ道具がここでも活躍します。計測して初めて「効いている」と言えます。

# 確認手順(Chrome DevTools)
#
# 1. Network タブを開いて JS でフィルタし、ページを再読み込み
#    → 初期ロードで読まれるチャンクが減っていることを確認
#
# 2. そのままスクロールして遅延部品を画面に入れる
#    → その瞬間に追加のチャンクが読み込まれれば成功
#
# 3. 「ページのソースを表示」でSSRのHTMLを見る
#    → @defer (hydrate ...) の中身もHTMLに入っている
#      (単なる @defer ならプレースホルダしか無い)