Angular page loads twice after Server Side Rendering

Question

I've implemented Server Side Rendering using Angular Universal,we've got a problem with our website,everything works correctly,but when loading the page,it loads twice.Everything was done according to Angular Universal guide for SSR,can anyone help me with this issue.

Answer 1

It's a very common issue with Angular Universal.

A server-rendered app shows a view of your app while the real client app loads, it’s just a static HTML page with styles until browser downloads client app scripts in background and Angular will show the dynamically rendered view of the live application. When the client apps render, it starts to re-run codes which in result it will issue HTTP requests again.

To solve this problem, you should use TransferHttpCacheModule, just follow the documents about how to implement it on your project. Link: https://github.com/angular/universal/blob/master/docs/transfer-http.md