Step 22: HTTP Transfer Cache Fixed
The Solution
Using HTTP transfer cache, we can reuse the data fetched during server-side rendering on the client, eliminating duplicate requests.
Benefits:
- No duplicate API calls
- Faster client-side rendering
- Reduced server load
- Better bandwidth usage
Fixed Code:
// app.config.ts
export const appConfig: ApplicationConfig = {
providers: [
provideHttpClient(
withFetch()
),
provideClientHydration(
withHttpTransferCacheOptions({
includePostRequests: true
})
)
]
};
// The same API call is now cached
this.api.getCards().subscribe(cards => {
this.cards = cards;
});
Watch the network tab and console. Notice how the data is only fetched once during SSR and reused on the client.
Data loaded (from transfer cache)
Request Information:
{
"totalCards": 20,
"firstCard": {
"id": 1,
"title": "Deserunt nemo et vel.",
"imageUrl": "https://picsum.photos/400/300?random=1"
},
"lastCard": {
"id": 20,
"title": "Vitae totam labore iste est.",
"imageUrl": "https://picsum.photos/400/300?random=20"
},
"timestamp": "2024-11-06T19:56:56.721Z"
}
Deserunt nemo et vel.
Ut ad quos dolorum.
Numquam ut et corporis ut.
Sapiente veniam unde eveniet.
Quia qui voluptate sit.
Tempore in ducimus totam.
Reprehenderit fuga ut id.
Odit ea vel quam omnis.
Natus ut quo velit repellat.
Minus maiores suscipit ut.
Sunt natus dolorem at.
Earum dicta et quos.
Culpa sed officiis ut eos.
Doloribus et sed ut quae ex.
Ut unde a officia hic alias.
Eligendi officia et velit.
Ex aut maiores eum.
Et nisi vel id ipsam.
Est amet ut est enim amet ut.
