Angular Universal is a package that turns our app into a Server-Side Rendered (SSR) one. It’m mostly beneficial for the SEO, making the inital state of our app actually usable.
Without SSR, the initial page load delivers an
index.html file that does not
include any actual content other than the tag representing our root component.
The actual HTML gets generated only after the JS scripts are pulled in and
executed. This makes the site appear slow.
With SSR, the site gets rendered on the server, and the initial load of
index.html brings this file with the actual content already there.
This creates new SSR-related files:
server.ts- an Express app that will serve the Angular app.
tsconfig.server.ts- TS config for the server-side code.
src/main.server.ts- bootstrapper for server app
When the code gets executed on the server, we cannot make use of
Browser-specific APIs, such as the
localStorage, and others.
Our code might need to be able to figure out the context of the execution -
whether it’s the server or the browser. We can inject the
When rendering the page on the server, it might make sense to also fetch some
data from some web API (potentially that API is not even accessible on the
client side). That data may be later retrieved by the browser using
The data being transfered to the browser is serialized with
and the client deserializes it with