クライアントへの状態転送
状態転送で重複リクエストを防ぎます
「クライアントへの状態転送」はCoddyKit上の無料Angular Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。
二重フェッチの問題
SSR中、サーバーはHTMLをレンダリングするためにデータを取得します。対策をしないと、ハイドレーション後にクライアントが同じデータを再度取得し、リクエストが無駄になったり、コンテンツがちらついたりします。
TransferStateによる解決
Angularの TransferState は、サーバー上のデータをHTMLにシリアライズし、クライアントが再取得せずに読み取れるようにします。データはレスポンス内のscriptタグを通じて渡されます。
データの受け渡し方法
サーバーに保存された状態は、ページ内にJSONとして埋め込まれます。起動時にクライアントがそれをデシリアライズするため、初回レンダリングではサーバーが使用したものと同じデータが使われます。
<!-- embedded in SSR HTML -->
<script id="ng-state" type="application/json">{"users-1":[...]}</script>makeStateKeyの使用
makeStateKey で型付きキーを作成し、TransferState サービスを通じて読み書きします。
import { makeStateKey, TransferState } from '@angular/core';
const USERS = makeStateKey<User[]>('users');
const state = inject(TransferState);
state.set(USERS, fetchedUsers);読み取り後に取得するパターン
サーバーとクライアントの両方で、まずキーがTransferStateに存在するか確認し、存在すればそれを使い、なければ取得します。サーバーは取得して保存し、クライアントは保存済みの値を見つけて呼び出しを省略します。
const state = inject(TransferState);
if (state.hasKey(USERS)) {
this.users = state.get(USERS, []);
} else {
this.http.get<User[]>('/api/users')
.subscribe(u => { this.users = u; state.set(USERS, u); });
}HttpClientが自動的に処理
provideClientHydration(withHttpTransferCacheOptions()) を呼び出すと（ハイドレーション時はデフォルトで有効）、HttpClient はサーバーのGETレスポンスをTransferStateにキャッシュします。そのため、同一のクライアントリクエストは手動でキーを指定しなくてもキャッシュから返されます。
provideClientHydration(withHttpTransferCacheOptions({ filter: (req) => req.method === 'GET' }))ちらつきの防止
クライアントが転送されたデータを再利用するため、ハイドレーション後のビューはサーバーのHTMLと完全に一致し、コンテンツが消えて再読み込みされるちらつきを防げます。
セキュリティに関する注意
転送された状態は公開HTMLに埋め込まれます。ページソースに公開したくない秘密情報、トークン、ユーザーごとの非公開データをTransferStateに入れないでください。
カスタム方式と自動方式
HTTPの転送キャッシュは、GETベースのデータ取得の大部分を自動的に処理します。サーバーからクライアントへ渡したい、HTTP以外の計算済み状態には手動の makeStateKey を使用します。
キャッシュのスコープ
HTTP転送キャッシュはリクエストごとに作成され、クライアントで一度だけ使用されます。最初に一致するクライアントリクエストが読み取った後、後続の呼び出しは通常どおりネットワークへ送られます。
動作確認
SSRのレスポンスを調べ、埋め込まれた状態のscriptを探します。ブラウザーのネットワークタブでは、ハイドレーション直後に重複した取得が省略されていることを確認できるはずです。
理解度チェック
状態の転送に関する知識を確認します。
まとめ
TransferState と makeStateKey を使ってサーバーからクライアントへデータを渡す方法、自動HTTP転送キャッシュの使い方、二重取得やちらつきの防ぎ方を学びました。また、非公開データを公開状態として埋め込まないようにしました。
よくある質問
「クライアントへの状態転送」レッスンは無料ですか？
はい。「クライアントへの状態転送」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。
「クライアントへの状態転送」で何を学びますか？
状態転送で重複リクエストを防ぎます ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Angular Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「クライアントへの状態転送」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このAngular Academyレッスンでコードを書いて実行できますか？
はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。