Angular 7 SSR, App component ngOnInit() called multiple times

Question

I have an angular 7 application with about 30 modules. I am fetching user details in app.component.ts to use it throughout the application but I suddenly noticed that user details API runs multiple times on 1 load.

After putting logs in ngOnInit() in my app.component.ts I found that logs are printing multiple times but it's happening only on server-side rending on the browser it renders only once.

Any idea why ngOnInit() calls more than once??

Answer 1

Concept of Angular SSR is that on 1st load of page/URL it renders through server and then transfer data on client side. So Technically it calls all the components, services exist on that page/URL twice.

You can use condition isPlatformBrowser and isPlatformServer method, so you can render only required part on server side. We render only specific thing on SSR which are related to SEO optimisation.