Angular Academy · Lesson

Transferring State to the Client

Avoid duplicate requests with state transfer.

Transferring State to the Client is a free Angular Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

The Double Fetch Problem

During SSR the server fetches data to render HTML. Without help, the client fetches the same data again after hydration, wasting a request and risking a content flicker.

TransferState To The Rescue

Angular's TransferState serializes data on the server into the HTML, then the client reads it instead of refetching. The data travels in a script tag in the response.

How It Travels

Server-stored state is embedded as JSON inside the page. On boot the client deserializes it, so the first render uses the same data the server used.

<!-- embedded in SSR HTML -->
<script id="ng-state" type="application/json">{"users-1":[...]}</script>

Using makeStateKey

Create a typed key with makeStateKey, then read or write through the TransferState service.

import { makeStateKey, TransferState } from '@angular/core';

const USERS = makeStateKey<User[]>('users');
const state = inject(TransferState);
state.set(USERS, fetchedUsers);

Read Then Fetch Pattern

On both server and client: if the key exists in TransferState, use it; otherwise fetch. The server fetches and stores; the client finds the stored value and skips the call.

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 Does It Automatically

Calling provideClientHydration(withHttpTransferCacheOptions()) (on by default with hydration) makes HttpClient cache server GET responses into TransferState, so identical client requests are served from the cache without manual keys.

provideClientHydration(withHttpTransferCacheOptions({ filter: (req) => req.method === 'GET' }))

Avoiding The Flicker

Because the client reuses transferred data, the hydrated view matches the server HTML exactly, preventing the flash where content disappears and reloads.

Security Note

Transferred state is embedded in the public HTML. Never put secrets, tokens, or per-user private data you would not expose in the page source into TransferState.

Custom Vs Automatic

The HTTP transfer cache covers most GET-based data fetching automatically. Use manual makeStateKey for non-HTTP computed state you want to carry from server to client.

Cache Scope

The HTTP transfer cache is per-request and consumed once on the client. After the first matching client request reads it, subsequent calls go to the network as normal.

Verifying It Works

Inspect the SSR response and look for the embedded state script. In the browser network tab you should see the duplicate fetch is skipped right after hydration.

Quick Check

Check your state transfer knowledge.

Recap

You learned to carry data from server to client with TransferState and makeStateKey, used the automatic HTTP transfer cache, avoided double fetches and flicker, and kept private data out of the publicly embedded state.

Frequently asked questions

Is the “Transferring State to the Client” lesson free?

Yes — the full text of “Transferring State to the Client” is free to read here on the web, and the Angular Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Angular Academy course, upgrade to CoddyKit PRO.

What will I learn in “Transferring State to the Client”?

Avoid duplicate requests with state transfer. You practise Angular Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Angular Academy?

No prior experience is required. Angular Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Transferring State to the Client” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Angular Academy lesson?

Yes. Every Angular Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Angular Academy