【Angular】増分ハイドレーションでSSRを最適化する方法

2026年9月7日

当ページのリンクには広告が含まれています。

この記事で解決できる悩み

Angularの増分ハイドレーションでSSRを最適化する方法は？

いずみ

こんな悩みを解決できる記事を書きました！

僕は現役フリーランスエンジニア（歴10年）で、資格は13個保有しています。

「AngularのSSRでハイドレーションのコストを減らしたい」とお考えではありませんか？

SSRを入れたのに初期表示の直後は操作が重い、と感じている方へ。

増分ハイドレーションを使うと、画面の一部だけを必要になったタイミングで後からハイドレーションできます。

いずみ

@deferが分かっていれば導入は難しくありません。

ということで、本記事ではAngularの増分ハイドレーションでSSRを最適化する方法を解説します。

いずみ

すぐ読み終わるので、ぜひ最後まで読んでくださいませ。

スクロールできます

【当サイト】おすすめフリーランスエージェント3選
エージェント	評価	ポイント	公式サイト
レバテックフリーランス	5.0	業界最大級のエージェント。高単価案件が豊富。	公式
Midworks	4.8	満足度調査で 3年連続3冠を達成。	公式
ITプロパートナーズ	4.6	週2〜3向けの案件が豊富。	公式

執筆者／監修者

フリーランスエンジニア（保有資格13個、企業と直接契約）
ブログ・アフィリエイト歴7年（2018年〜）
ブランドせどりで月利50万円⇨脱サラ
投資（仮想通貨・FX）歴7年（2018年〜）
X（旧Twitter）フォロワー約1,900人
運営者情報はこちら

いずみです

よく読まれている記事はこちら！

【Angular】増分ハイドレーションでSSRを最適化する

早速ですが、Angularの増分ハイドレーションでSSRを最適化する手順を見ていきます。

増分ハイドレーションとは

ハイドレーションは、サーバーがレンダリングしたHTMLに対して、ブラウザ側でイベントや状態を紐付けてアプリを操作可能にする処理です。

通常のハイドレーションは、ページ全体のコンポーネントのJavaScriptを最初にまとめて読み込み、一括で紐付けを行います。

増分ハイドレーションは、@deferブロック単位で紐付けを遅らせ、必要になったブロックだけを後からハイドレーションする仕組みです。

ハイドレーションが済むまでのあいだ、@deferブロックのJavaScriptは初期バンドルに含まれず、初期表示の負荷が下がります。

いずみ

「HTMLはサーバーで作る、配線は後回しにできるところは後回し」というイメージです。

通常の@deferとの違い

hydrateトリガーを付けない@deferブロックは、SSR時に@placeholderの内容がHTMLとして出力されます。

hydrateトリガーを付けた@deferブロックは、SSR時にメインのテンプレートがHTMLとして出力され、hydrateトリガーが発火するまでハイドレーションだけが保留されます。

結果として、増分ハイドレーションを使うとコンテンツはSSRで表示されつつ、操作に必要なJavaScriptの実行だけを遅延できます。

事前準備をする

増分ハイドレーションはSSRと通常のハイドレーションが前提になります。

STEP

ng add @angular/ssr でSSRを追加する

既存のプロジェクトにSSRとサーバーエントリを追加します。

ng add @angular/ssr

コマンド実行後、server.tsやmain.server.tsが生成されます。

STEP

provideClientHydration を登録する

app.config.tsのprovidersにprovideClientHydrationを追加します。

import { ApplicationConfig } from '@angular/core';
import { provideClientHydration } from '@angular/platform-browser';

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

provideClientHydrationを追加した時点で、通常のハイドレーションが有効になります。

Angular 19では、provideClientHydrationにwithIncrementalHydrationを渡して明示的に有効化する必要がありました。

後続のバージョンでは、provideClientHydrationだけで増分ハイドレーションが有効になり、無効化したい場合はwithNoIncrementalHydrationを渡します。

@deferブロックにhydrateトリガーを付ける

ハイドレーションを遅らせたいUIを@deferブロックで囲み、hydrateトリガーを指定します。

@defer (hydrate on interaction) {
  <app-comments />
} @placeholder {
  <div>コメントを読み込みます</div>
}

上記の例では、ユーザーがブロックを操作したタイミングでapp-commentsのJavaScriptが読み込まれ、ハイドレーションが走ります。

@placeholderブロックは、SSRを使わないクライアントレンダリング時に必要になるため引き続き記述します。

いずみ

既存の@deferにhydrate句を1行足すだけ、というのが導入しやすいポイントです。

読み込みトリガーとhydrateトリガーを併用する

@deferには、コンポーネントを読み込むトリガーと、ハイドレーションを実行するトリガーを別々に指定できます。

@defer (on idle; hydrate on interaction) {
  <app-chart />
} @placeholder {
  <div>グラフを準備中です</div>
}

クライアントレンダリング時はアイドル状態でapp-chartを読み込み、SSR経由の表示では操作が起きるまでハイドレーションを保留します。

hydrateトリガーの種類

hydrateに指定できるトリガーは、通常の@deferトリガーと同じ顔ぶれです。

hydrate on idle：ブラウザがアイドル状態になったとき（idle(500)のように待機時間も指定可）
hydrate on viewport：ブロックがビューポートに入ったとき
hydrate on interaction：クリックやキー入力などの操作が起きたとき
hydrate on hover：ポインタが乗ったとき
hydrate on immediate：レンダリング直後
hydrate on timer(500ms)：指定時間の経過後
hydrate when 条件式：条件式がtrueになったとき
hydrate never：ハイドレーションを一切行わない

いずみ

viewportとinteractionを使う場面が多いです。

画面下部の重いウィジェットはviewport、押されるまで動かないUIはinteraction、といった具合に振り分けます。

hydrate neverで静的なブロックを固定する

hydrate neverを指定した@deferブロックは、SSRで出力したHTMLがそのまま残り、対応するJavaScriptはクライアントに配信されません。

フッターの会社情報や規約の本文など、操作が発生しない領域に向いています。

@defer (hydrate never) {
  <app-site-footer />
}

hydrate neverを付けたブロック内でクリックイベントなどを使っている場合、動作しなくなる点には注意します。

いずみ

イベントリプレイは増分ハイドレーションと同時に自動で有効になるので、ハイドレーション前のクリックも取りこぼしにくいです。

動作を確認する

ビルドしてサーバーを起動し、ネットワークタブでチャンクの読み込みタイミングを確認します。

ng build
node dist/<project-name>/server/server.mjs

@deferブロックのJavaScriptが初期ロードで読み込まれず、トリガー発火後に取得されていれば増分ハイドレーションが効いています。

スクロールできます

【当サイト】おすすめフリーランスエージェント3選
エージェント	評価	ポイント	公式サイト
レバテックフリーランス	5.0	業界最大級のエージェント。高単価案件が豊富。	公式
Midworks	4.8	満足度調査で 3年連続3冠を達成。	公式
ITプロパートナーズ	4.6	週2〜3向けの案件が豊富。	公式

【厳選】フリーランスエンジニアにおすすめなエージェント3選

フリーランスエンジニアになるにはエージェントから案件をもらう必要があります。

僕が実際に利用しているおすすめエージェントを紹介しますね。

いずみ

エージェントは必ず複数登録してください。

担当者によっては「全然案件紹介してくれない…」みたいなこともあるので…

僕は実際に5つのエージェントを使い回していますよ。

フリーランスを始めるなら「レバテックフリーランス」

案件数	マージン率	単価
約88,000件	非公開	高
初心者	福利厚生	申し込み
		無料

Good Point

業界最大級の案件数。
業界トップクラスの高単価報酬、低マージン（平均年収862万円）。
案件参画中のフォローの充実。

※詳細は「【業界最大手】レバテックフリーランスとは？メリットや利用手順を解説！」を参照。

レバテックフリーランス は業界最大手のフリーランスエージェントです。

とにかく案件数が多いので、とりあえず登録しておけば間違いないエージェントです！

いずみ

僕もはじめてフリーランスの案件を貰ったのはレバテックフリーランス です。

保有している案件数が多いので、業務経験がなくても何かしらの案件は紹介してもらえますよ（僕はJavaの経験3年でも案件を貰えました）。

詳細はコチラ

公式サイトを詳しく見る

手厚い保障を重視したいなら「Midworks 」

案件数	マージン率	単価
約10,000件	非公開	中
初心者	福利厚生	申し込み
		無料

Good Point

手厚い保障で正社員並みの安心感。
還元率60％超え＆単価公開でクリアな契約。
給与保障制度（審査あり）。

Midworks は手厚い保障が特徴のフリーランスエージェントです。

フリーランスを目指しているけど不安な方や保障を重視したい方におすすめです。

いずみ

僕も何度か案件を紹介してもらいました。

自分のスキルに合った案件を紹介してもらえましたし、電話のやり取りも非常に丁寧でした。

詳細はコチラ

公式サイトを詳しく見る

週2〜3日の案件探しなら「ITプロパートナーズ」

案件数	マージン率	単価
約5,000件	非公開	高
初心者	福利厚生	申し込み
経験者向け		無料

Good Point

IT案件に特化したフリーランスエージェント。
週2〜3日の案件が豊富。
リモート案件が多く、直エンドなので単価も高い。

※詳細は「【週2・3案件】ITプロパートナーズとは？メリットや利用手順を解説！」を参照。

ITプロパートナーズ はIT案件に特化したフリーランスエージェントです。

週2〜3日から参画できる案件が豊富なので、起業したい人にもおすすめです。

いずみ

週2〜3日の案件はある程度スキルがないと紹介してもらえない印象です。

とはいえ、週5の案件ももちろんありますし、僕が利用した時は迅速・丁寧に対応していただきました！

詳細はコチラ

公式サイトを詳しく見る

よくある質問

増分ハイドレーションにSSRは必須ですか？

はい。増分ハイドレーションはSSRと通常のハイドレーションの上に成り立つ機能です。

SSRを有効にしていない場合、@deferは通常の遅延読み込みとして動作し、hydrate句は効果を持ちません。

hydrateトリガーを付けた@deferと付けない@deferはどう使い分けますか？

初期表示でHTMLとして見せたいコンテンツにはhydrateトリガーを付けます。

hydrateトリガーを付けない@deferはSSR時に@placeholderが出力されるため、スクロールなどで初めて表示されるUIに向いています。

既存の@deferをそのまま移行できますか？

hydrate句を追記するだけで移行できます。

ただしSSR時にメインテンプレートが出力されるようになるため、依存関係が重いブロックはビルドサイズと相談しながら付けます。

まとめ

今回は、Angularの増分ハイドレーションでSSRを最適化する方法について解説しました。

以下が本記事のまとめになります。

まとめ

増分ハイドレーションは@deferブロック単位でハイドレーションを遅延できる。
provideClientHydrationを入れれば有効になり、@deferにhydrate句を足すだけで使える。
viewportやinteractionなどのトリガーで、必要になった領域だけを後からハイドレーションできる。

まとめ

おすすめ本

Angularアプリケーションプログラミング

¥4,070 （2023/07/23 15:56時点 | Amazon調べ）

Amazon

楽天市場

ポチップ

Angularの勉強なら「Angularアプリケーションプログラミング」が分かりやすくておすすめですよ♪

いずみ

最後までお読みいただき、ありがとうございました！

スクロールできます

【当サイト】おすすめフリーランスエージェント3選
エージェント	評価	ポイント	公式サイト
レバテックフリーランス	5.0	業界最大級のエージェント。高単価案件が豊富。	公式
Midworks	4.8	満足度調査で 3年連続3冠を達成。	公式
ITプロパートナーズ	4.6	週2〜3向けの案件が豊富。	公式