TransferState for data sharing in Angular - Performance & Optimization

Performance: TransferState for data sharing

MEDIUM IMPACT

TransferState affects the initial page load speed by reducing duplicate HTTP requests between server and client.

Sharing server-fetched data with the client to avoid duplicate HTTP calls

Angular

constructor(private transferState: TransferState, private http: HttpClient) {}

ngOnInit() {
  const saved = this.transferState.get(DATA_KEY, null);
  if (saved !== null) {
    this.data = saved;
    this.transferState.remove(DATA_KEY);
  } else {
    this.http.get('/api/data').subscribe(data => {
      this.data = data;
      this.transferState.set(DATA_KEY, data);
    });
  }
}

Data fetched on server is stored and reused on client, avoiding duplicate HTTP calls and speeding up rendering.

📈 Performance GainReduces client HTTP requests by 1, improving LCP by 200-500ms and lowering server load

Sharing server-fetched data with the client to avoid duplicate HTTP calls

Angular

ngOnInit() {
  this.http.get('/api/data').subscribe(data => this.data = data);
}

This triggers the same HTTP request twice: once on server and again on client, delaying content rendering.

📉 Performance CostBlocks rendering until client HTTP request completes, increasing LCP by 200-500ms depending on network

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Duplicate HTTP fetch on server and client	Minimal	1 reflow after data loads	Medium paint cost due to delayed content	[X] Bad
Using TransferState to share data	Minimal	Single reflow on server render	Lower paint cost due to faster content display	[OK] Good

Rendering Pipeline

TransferState stores server-fetched data in a serialized form embedded in HTML. On client hydration, Angular reads this data to skip redundant HTTP calls, reducing Layout and Paint delays.

→Network

→JavaScript Execution

→Layout

→Paint

⚠️ BottleneckNetwork and JavaScript Execution due to duplicate HTTP requests and data processing

Core Web Vital Affected

LCP

TransferState affects the initial page load speed by reducing duplicate HTTP requests between server and client.

Optimization Tips

1Use TransferState to embed server data for client reuse and avoid duplicate HTTP calls.

2Always remove TransferState data after client reads it to prevent stale data issues.

3Monitor Network tab to ensure API calls are not duplicated on client.

Performance Quiz - 3 Questions

What is the main performance benefit of using TransferState in Angular?

A Avoids duplicate HTTP requests between server and client

B Reduces CSS file size

C Improves JavaScript minification

D Increases DOM node count

DevTools: Network

How to check: Open DevTools Network tab, reload page, and observe if the API call is made twice (server and client) or only once.

What to look for: If the API request appears twice, TransferState is not used properly; a single request means good performance.