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

teroauralinna profile image Tero Auralinna Originally published at auralinna.blog on ・1 min read

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.

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 Angular Universal Common Module readme. I just want to point this out in case someone also has a hard time to find a proper solution.

Posted on by:


Editor guide