Angular Universal and external apis

Question

Having searched for angular universal for many days I see there is a lack of information of how actually ServerSideRendering works .
Let me guide you through my concerns and help me clarify some blur spots.

There are pretty many guides telling you how to setup SSR what to be careful about like not accessing DOM or not using jquery.
None of them really shows how angular universal actually works behind the scenes especially when you access an external api.

I would expect a normal SSR application to just run on server create some html and then load the html until the client downloads the javascript code.
But what happens in case of using an external api?(which is a very common scenario).
Does the server version of our app make real calls getting real data back from api, to render with html? Or something else happens?

Also in case of an external api which is called via a route resolver.Is in that case SSR possible? Meaning that our application has to wait for api response either way.

Answer 1

When using angular universal, the SSR process will actually generate html that the browser will download, with some inline css so that the page is rendered quickly. After that, the browser will download the JS files for your angular app, and at this point, a transition occurs after which the client-side JS app takes control.

You can use external APIs. If you've got a call to your API in your angular code, (e.g. on component init) then that call will be performed server side; meaning that angular universal will wait for that call to complete so that it can use the data retrieved to generate the page's html