How does TransferState work in Angular Universal?
TransferState is a mechanism in Angular Universal that lets you pass data from the server to the browser, so you do not have to make the same HTTP request again after SSR.
Why it is needed
During SSR, the server has already fetched the data from the API to render the page. But when Angular starts up in the browser (during hydration), by default it runs those same requests again, because the client does not know about them.
TransferState solves this problem:
the server puts the data into a state, and the client reads and uses it instead of making the request again.
How it works, step by step
- SSR makes an HTTP request on the server
- Puts the result into
TransferState - Angular inserts this data into the HTML (as a script with JSON)
- The browser reads it at startup and passes it to the service
- The HTTP request on the client is NOT made again
A very simplified example
On the server:
this.http.get('/api/products').subscribe(data => {
this.transferState.set(PRODUCTS_KEY, data);
});On the client:
const data = this.transferState.get(PRODUCTS_KEY, null);If the data is present: use it,
if not: only then make the http.get() call.
What TransferState gives you
| Problem without it | Solution with TransferState |
|---|---|
| duplicate HTTP requests (server + client) | only one request |
| slow hydration | fast interactivity |
| extra load on the API | less traffic |
Conclusion
TransferState in Angular Universal is a "bridge" between the server and the client that passes ready-made data, avoiding repeated requests and speeding up loading.
Short Answer
Interview readyA concise answer to help you respond confidently on this topic during an interview.