13

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.

David
  • 33,444
  • 11
  • 80
  • 118
Dionisis K
  • 614
  • 5
  • 17

2 Answers2

12

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

David
  • 33,444
  • 11
  • 80
  • 118
  • 1
    So in that case you can use prerender so that universal prerenders api response? – Dionisis K Mar 13 '18 at 12:32
  • Pre-rendering is mostly useful if you content does not change very often (when it change, you should delete the cached html files) – David Mar 13 '18 at 12:58
  • Is there a way to use the browser credentials like `{withCredentials: true}` for that API on the server side? We tend to just get 403s. – Amos47 Jul 02 '18 at 16:41
  • why that's not my case? I'm making API calls on init and waiting for an observable but the html is not rendered when the call ends... – BruneX Dec 23 '19 at 16:15
  • 1
    It sounds like Angular Universal doesn't actually run the network requests on the server unless you add some [caching module](https://github.com/angular/universal/blob/main/docs/transfer-http.md)... – quickshiftin Jan 26 '23 at 20:38
0

Also make sure that is calling the same API.

This are different routes:

  1. api/
  2. api
luis fernando yupanqui taco
  • 174
  • 4