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 TransferHttpCacheModule docs. 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
I am an experienced web developer with an eye for solid UI/UX design. I have specialized in front-end development, responsive web design, design systems, modern web frameworks, and content management systems. I also have experience in mobile apps development and back-end coding with PHP, Node.js, and Java. So I have a full stackish background, but I'm enjoying most building robust and beautiful front-ends with performance, accessibility, and testability in mind.
© Tero Auralinna
Auralinna.fiSunset with Bubbles: Travel and Photography Blog