PricingLoginStart free
Angular Academy · Lesson

Transferring State to the Client

Avoid duplicate requests with state transfer.

Lesson 4 of 413 steps

Transferring State to the Client is a free Angular Academy lesson on CoddyKit. This is lesson 4 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, and your progress syncs across the web and the CoddyKit app. The Angular Academy course includes 4 lessons in total.

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.

Answer it in the interactive lesson

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.

Free to start

Learn HTML with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses
38
Lessons
144
Start learning freeView the full course

Frequently Asked Questions

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

Yes — any 3 lessons of the Angular Academy learning path, including “Transferring State to the Client”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The Angular Academy course includes 4 lessons in total.

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, so you can start here or from the beginning and move at your own pace. This is lesson 4 of 4.

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

  1. Why Server-Side Rendering
  2. Setting Up Angular SSR
  3. Server Routes and Rendering Modes
  4. Transferring State to the Client
← Back to Angular Academy