AngularのIncremental Hydrationの挙動を確認する

DRANK

本記事はAngularアドベントカレンダー2025の14日目の記事です。昨日は@ic_lifewoodさんでした。はじめにAngular v17以降、Angularでは@angular/ssrパッケージの開発によりServer Side Rendering(SSR)やPrerenderingの機能が充実してきました。この記事では、Angular v20でstableになった機能の1つであるIncremental Hydration(インクリメンタルハイドレーション)の概要と実際の挙動を紹介します。HydrationとはIncremental Hydrationの前に、Hydrationとは何かに触れておきます。Hydrationとは、SSRやPrerenderingにおいてサーバー側がレンダリングしたアプリケーションをクライアント側で復元するプロセスのことです。(参考: ハイドレーション • Angular 日本語版)サーバー側でレンダリングされた静的なHTMLには、ボタンのクリックなどのイベント処理を行うJavaScriptのロジックが組み込まれていません。そこでクライアント側でJavaScriptを読み込み、Hydrationのプロセスで既存のDOM要素にイベントリスナーを正しく接続します。これにより、ユーザーがボタンをクリックしたり、フォームに入力したりといった操作が可能になります。他にも、サーバー側でレンダリングの際…