Suggest an editImprove this articleRefine the answer for “How does TransferState work in Angular Universal?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**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. **Key point:** TransferState is a "bridge" between the server and the client that passes ready-made data, avoiding repeated requests and speeding up loading.Shown above the full answer for quick recall.Answer (EN)Image**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** 1. **SSR makes an HTTP request on the server** 2. **Puts the result into** `TransferState` 3. **Angular inserts this data into the HTML (as a script with JSON)** 4. **The browser reads it at startup and passes it to the service** 5. **The HTTP request on the client is NOT made again** --- ### **A very simplified example** **On the server:** ```ts this.http.get('/api/products').subscribe(data => { this.transferState.set(PRODUCTS_KEY, data); }); ``` **On the client:** ```ts 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.**For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.