By default, the Angular Universal app makes HTTP requests again when app is bootstrapped even app is already rendered on the server side. Though there is a really simple solution which can be implemented without any actual code changes. At first when I tried to find how to prevent requests I only found tutorials how to implement this at the component level. After googling a while I luckily found an easier way to implement this.

Solution is in the [TransferHttpCacheModule](https://github.com/angular/universal/tree/master/modules/common).

> TransferHttpCacheModule installs a Http interceptor that avoids duplicate HttpClient requests on the client, for requests that were already made when the application was rendered on the server side.

Since this is a HTTP interceptor it automatically affects all requests and does all the hard work under the hood.

I don't repeat installation steps here because up-to-date instructions can be found from the [TransferHttpCacheModule docs](https://github.com/angular/universal/blob/master/docs/transfer-http.md). I just want to point this out in case someone also has a hard time to find a proper solution.

__Update 1.7.2018:__ Changed doc link

How to transfer the Angular server-side state to the client-side

By default, the Angular Universal app makes HTTP requests again when app is bootstrapped even app is already rendered on the server side. Though there is a really simple solution which can be implemented without any actual code changes. At first when I tried to find how to prevent requests I only found tutorials how to implement this at the component level. After googling a while I luckily found an easier way to implement this.

Blog posts related to cache

How to transfer the Angular server-side state to the client-side