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

user_4119808 0
Viewed 1882

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??

angular-universal angular server-side-rendering javascript
3 Answers

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.

user_64601200

The ngOnInit() hooks only once after all directives are instantiated. If you have subscription inside ngOnInit() and it's not unsubscribed then it will run again if the subscribed data changes. In your case when loading API calls via SSR on the server side, the server does not always wait for the response to come and probably that can be a reason for multiple logs. A suggestion will be to delegate this on the client side using isPlatformBrowser. This is what it looks to me based on the investigation of general SSR flow.

user_6909990

I am not sure if this solved yet, but here is one suggestion:

Add the subscribe part in your component itself and remove it from your function which makes HTTP call:

ngOnInit() {
    this.loadData();
}

loadData(){
    this.my_service.getData().subscribe(data => this.userDetails = data);
}

And in your service, you can have a plain HTTP call:

getData() {
    return this.http.get('../your/url')
           .map((res:Response) => res.json());
}

I hope this helps.

user_48254980
Related