67. ハイドレーション — サーバのHTMLをそのまま引き継ぐ

SSRで届いたHTMLは、見えはしますが、まだ動きません。ボタンのクリックにも反応しない「静止画」の状態です。その後ブラウザ側でAngularが起動し、届いているHTMLにイベントリスナーや状態を紐付けて、動くアプリに変えます。この引き継ぎの工程をハイドレーション(hydration)と呼びます。乾いたHTMLに水を注いで生き返らせる、というイメージの名前です。

ハイドレーションが無いと、ブラウザ側のAngularは届いたHTMLをいったん捨てて、同じ画面をゼロから作り直します。一瞬のちらつきが出るうえ、せっかくサーバで作ったDOMが無駄になります。provideClientHydration() を設定しておくと、Angularは既存のDOMをそのまま再利用し、紐付けだけを行います。ng add @angular/ssr で導入した場合は、この設定も最初から入っています。

前提として大事なのは、サーバとブラウザで同じHTMLが生成されることです。たとえば <table> の直下に勝手なタグを置くようなHTML構造の崩れがあると、ブラウザが構造を直してしまい、サーバのHTMLと一致せず照合に失敗します。また、Angularの外で直接DOMを書き換えるライブラリとも相性が悪いです。どうしても合わない部分には、その要素だけハイドレーションを外す ngSkipHydration という逃げ道も用意されています。

サンプルコード(フレームワーク環境が必要なため表示のみ)

// app.config.ts — ハイドレーションを有効にする
import { ApplicationConfig } from '@angular/core';
import {
  provideClientHydration,
  withEventReplay,
} from '@angular/platform-browser';

export const appConfig: ApplicationConfig = {
  providers: [
    // サーバ製のHTMLを捨てずに再利用して紐付けだけ行う。
    // withEventReplay: 紐付け完了前のクリックも取りこぼさず後で再生
    provideClientHydration(withEventReplay()),
  ],
};

// どうしても照合が合わない部品だけ個別に外せる:
//   <app-legacy-widget ngSkipHydration />

サンプルコードで身につける(5本) →

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

公式ドキュメントで詳しく ↗