To use SSR in Angular or any other frontend framework, the challenge is generally avoiding duplicate API calls on the client side after the hydration. This typically happens because:<\/p>\n\n\n\n
To prevent double API calls, the recommended approach is to transfer server-fetched data to the client using Angular\u2019s built-in TransferState API.<\/p>\n\n\n\n
Angular provides a utility called TransferState from @angular\/platform-browser, which allows injecting data during SSR and retrieving it on the client without making another API call.<\/p>\n\n\n\n
Let\u2019s walk through a concrete example of how to use TransferState to share API data from SSR to the client.<\/p>\n\n\n\n
\/\/ data.service.ts\nimport { Injectable, inject, PLATFORM_ID } from '@angular\/core';\nimport { HttpClient } from '@angular\/common\/http';\nimport { makeStateKey, TransferState } from '@angular\/platform-browser';\nimport { isPlatformServer } from '@angular\/common';\nimport { Observable, of } from 'rxjs';\nimport { tap } from 'rxjs\/operators';\n\n@Injectable({\n providedIn: 'root'\n})\nexport class DataService {\n private http = inject(HttpClient);\n private transferState = inject(TransferState);\n private platformId = inject(PLATFORM_ID);\n\n private DATA_KEY = makeStateKey<any>('api-data');\n\n getData(): Observable<any> {\n \/\/ If running on the client and state exists, return it\n if (!isPlatformServer(this.platformId) && this.transferState.hasKey(this.DATA_KEY)) {\n const data = this.transferState.get(this.DATA_KEY, null);\n this.transferState.remove(this.DATA_KEY); \/\/ Clean up after use\n return of(data);\n }\n\n \/\/ Fetch from API\n return this.http.get('https:\/\/api.example.com\/data').pipe(\n tap(data => {\n \/\/ If on the server, save the data to TransferState\n if (isPlatformServer(this.platformId)) {\n this.transferState.set(this.DATA_KEY, data);\n }\n })\n );\n }\n}<\/code><\/pre>\n\n\n\nComponent Using the Service<\/h3>\n\n\n\n\/\/ app.component.ts\nimport { Component, OnInit } from '@angular\/core';\nimport { DataService } from '.\/data.service';\n\n@Component({\n selector: 'app-root',\n template: `<h1>SSR Data<\/h1><pre>{{ data | json }}<\/pre>`\n})\nexport class AppComponent implements OnInit {\n data: any;\n\n constructor(private dataService: DataService) {}\n\n ngOnInit() {\n this.dataService.getData().subscribe(res => {\n this.data = res;\n });\n }\n}<\/code><\/pre>\n\n\n\nHow It Works:<\/strong><\/p>\n\n\n\n\n- During SSR, Angular executes getData(), makes the API call, and stores the result in TransferState.<\/li>\n\n\n\n
- The rendered HTML includes a <script> tag with serialized data.<\/li>\n\n\n\n
- When the browser hydrates the page, Angular reads from TransferState instead of re-calling the API.<\/li>\n<\/ul>\n\n\n\n
Why Use TransferState?<\/h2>\n\n\n\n\n- \u00a0Prevents duplicate HTTP calls<\/li>\n\n\n\n
- \u00a0Increases performance by avoiding unnecessary network traffic<\/li>\n\n\n\n
- \u00a0Improves user experience by displaying the data immediately on load<\/li>\n\n\n\n
- \u00a0Built into Angular with no external dependencies<\/li>\n<\/ul>\n\n\n\n
\u00a0Best Practices and Tips<\/h2>\n\n\n\n\n- Always use makeStateKey<T>() for strong typing and uniqueness.<\/li>\n\n\n\n
- Remove data from TransferState after reading it on the client to free memory.<\/li>\n\n\n\n
- Use platform checks (isPlatformServer, isPlatformBrowser) to conditionally execute logic.<\/li>\n<\/ul>\n\n\n\n
Common Pitfalls<\/h2>\n\n\n\n
Not using TransferState results in:<\/strong><\/p>\n\n\n\n\n- SSR making an API call\u00a0<\/li>\n\n\n\n
- Client making the same API call again<\/li>\n<\/ul>\n\n\n\n
Conclusion<\/h2>\n\n\n\n