完全ハイドレーションの有効化
ハイドレーションを有効にして再レンダリングを防ぎます
「完全ハイドレーションの有効化」はCoddyKit上の無料Angular Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。
Hydration を有効にする
アプリケーションの providers に provideClientHydration() を追加すると、完全な hydration が有効になります。ng add @angular/ssr schematic を使うと自動的に追加されます。
import { provideClientHydration } from '@angular/platform-browser';
export const appConfig = {
providers: [provideClientHydration()]
};配置場所
ブラウザー側の appConfig の providers に配置します。これはクライアントをブートストラップする際に使用するものと同じ設定です。サーバー側の設定では provideServerRendering() を使って上書きマージします。
完全な hydration とは
完全（eager）な hydration では、JavaScript の読み込みと Angular のブートが完了するとすぐに、コンポーネントツリー全体が hydration されます。すべてのコンポーネントが一度にインタラクティブになります。
イベントのリプレイ
withEventReplay() を有効にすると、hydration の完了前に発生したユーザー操作が捕捉され、後で再実行されます。これにより、低速なデバイスでクリックが失われるのを防げます。
import { provideClientHydration, withEventReplay } from '@angular/platform-browser';
providers: [provideClientHydration(withEventReplay())]HTTP 転送キャッシュ
Hydration を有効にすると、サーバーからの HttpClient の GET レスポンスはデフォルトで TransferState にキャッシュされます。そのため、クライアントは起動後に同じデータを再取得しません。
provideClientHydration(withHttpTransferCacheOptions({ filter: r => r.method === 'GET' }))Hydration の確認
開発モードでコンソールを開きます。Angular は hydration の統計情報（hydration されたコンポーネント数、再利用されたノード数）を記録します。ミスマッチの警告がなければ、hydration は問題なく成功しています。
// Angular hydrated 24 component(s) and 187 node(s)ミスマッチを修正する
NG0500 のミスマッチエラーが表示された場合は、非決定的なテンプレートや手動による DOM の編集を探します。サーバーとクライアントの出力が一致するよう、マークアップを決定的にしてください。
ブラウザー API をガードする
初回レンダリング中に window や localStorage にアクセスするコードは、サーバーとクライアントの間でマークアップを変える可能性があります。isPlatformBrowser でガードするか、view init 後に実行してください。
if (isPlatformBrowser(this.platformId)) {
this.width = window.innerWidth;
}完全な hydration のトレードオフ
完全な hydration はシンプルですが、すべてのコンポーネントの JavaScript を最初にダウンロードして実行します。大規模なアプリではインタラクティブになるまでの時間が遅れる可能性があり、段階的な hydration はこの問題に対処します。
i18n と hydration
Hydration は Angular の i18n と連携しますが、翻訳済みのコンテンツが決定的になるようにしてください。サーバーとクライアントのロケールが異なると、hydration エラーが発生します。
本番環境での確認
リリース前に本番用にビルドして SSR の出力を配信し、ネットワークとコンソールで、ミスマッチなしに hydration が実行されること、また転送キャッシュによって二重の取得が防がれることを確認してください。
クイックチェック
完全な hydration についての理解度を確認しましょう。
まとめ
provideClientHydration() で完全な hydration を有効にし、hydration 前のクリックに対応するために withEventReplay() を追加しました。また、HTTP 転送キャッシュを利用し、ブラウザー API をガードして、hydration が問題なく行われることを確認しました。完全な hydration はシンプルですが、すべての JS を最初に読み込みます。
よくある質問
「完全ハイドレーションの有効化」レッスンは無料ですか？
はい。「完全ハイドレーションの有効化」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。
「完全ハイドレーションの有効化」で何を学びますか？
ハイドレーションを有効にして再レンダリングを防ぎます ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Angular Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「完全ハイドレーションの有効化」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このAngular Academyレッスンでコードを書いて実行できますか？
はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- ハイドレーションとは
- 完全ハイドレーションの有効化
- @deferによる段階的ハイドレーション
- Core Web Vitalsの測定