Universal: Server side rendering doesn't wait for API calls to finish
Hi I am using Angular version 4.3 and I have implemented server side rendering as mentioned in this article.
https://medium.com/@cyrilletuzi/angular-server-side-rendering-in-node-with-express-universal-engine-dce21933ddce
When I hit the server url to get the server side rendered HTML, the component's initial data do come up which are static and doesn't depend on any API calls.
But the problem is that the rendering does not contain data that should be present after completing the AJAX request.
I have written the call for API in my component's ngOnInit method. It calls a service which invokes angular's http service's get method to fetch the data.
The angular universal rendering does call this function. The call is made but does not wait for the response to come back. It instead returns the initial data.
And after some time in the server console, I do see that the response has come back to the server. But by that time angular universal has already returned.
Please help on how to solve this issue.
anikettriconinfotech
All 11 comments
There's not much we can do without a reproduction, or even at least some example code.
Toxicable
on 10 Nov 2017
Universal will not wait for anything save what is required to render the view. Remember the goal is to get the template out as soon as it can be rendered. If you want to delay this, you'll have to put this logic in a Route Resolve and pass the data in to the component. This will prevent the view from being rendered until the resolve has completed. Beware though, if your resolve hangs, your entire rendering process will hang and likely error out.
CaerusKaru
on 12 Nov 2017
As a follow-up to this issue, if you're using HttpClient from Angular > 4.3, this issue shouldn't arise. As @vikerman mentions in #846, if you're using a different AJAX methodology, you will have to wrap this in a Zone MacroTask. A guide for this process is forthcoming, but it may be simpler for your use case to simply switch to using the HttpClient. Alternatively, you can follow the Route Resolve method I provided, as that will work as well.
CaerusKaru
on 23 Nov 2017
ok so I am half a day into this and before I spend more time, should there be a simple example of server side pre-rendering of some http call or other promise??? I mean why would I use angular universal at all if it doesn't do the main thing - pre-render the Ajax content? Is there an official repo for this? Besides it doesn't even pre-render a simple
ngOnInit() {
this.message = 'Hello!!';
}
Here is the html i get via view source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>NgUniversalDemo</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
<script type="text/javascript" src="inline.bundle.js"></script><script type="text/javascript" src="polyfills.bundle.js"></script><script type="text/javascript" src="styles.bundle.js"></script><script type="text/javascript" src="vendor.bundle.js"></script><script type="text/javascript" src="main.bundle.js"></script></body>
</html>
d668
on 15 Jan 2018
The https://github.com/angular/universal-starter is our official starter repo for CLI + Angular Universal. Check it out. It looks like you're just rendering client-side rendering.
If you're already using the universal-starter, make sure you're actually building an SSR build. If you're doing ng serve npm start or anything like that - that's only client-side rendering for development.
Check out the readme there for more info.
MarkPieszak
on 24 Jan 2018
ok thanks got it
d668
on 24 Jan 2018
I have the same problem right now. I'm wondering how did you solve it?
Thanks
ramaces
on 2 Aug 2018
For me the problem was that I was using $http in a different way. Just use the plain $http service from angular.
aniket-kulkarni
on 5 Aug 2018
Having the same issue here. No api calls and very hard to debug SSR.
I am using Angular 6 and the HttpClient from angular/common/http.
I do my api call in the constructor with the following code.
this.httpClient.get(url, options).subscribe(result => {
callback(result);
}, error => {
callback(null);
console.error(error);
});
swaner
on 11 Aug 2018
@CaerusKaru I did the same i.e I am calling the DDP Method call in Resolve but data not render on SSR for that call. do you have any suggestion for DDP/METEOR
raza2022
on 26 Sep 2018
and when you are done with http you will understand that cookies are even a bigger pain and you figure out pre-rendering as mean as it sounds is actually easier than Angular Universal
d668
on 9 Nov 2018
Related issues
inorganik
路
4Comments
A50
路
5Comments
mmeylan
路
4Comments
moczix
路
5Comments
jeffwhelpley
路
6Comments
Most helpful comment
Universal will not wait for anything save what is required to render the view. Remember the goal is to get the template out as soon as it can be rendered. If you want to delay this, you'll have to put this logic in a Route Resolve and pass the data in to the component. This will prevent the view from being rendered until the resolve has completed. Beware though, if your resolve hangs, your entire rendering process will hang and likely error out.