Server side rendering with Angular

(see https://angular.io/guide/universal)

A normal Angular application executes in the browser, rendering pages in the DOM in response to user actions and events. Server side rendering (SSR) is a process of generating static application pages on the server.

Angular Universal can generate and serve those SSR pages in response to requests from browsers. It can also pre-generate pages as HTML files that you serve later.

Why use SSR?

The three main reasons to create a SSR version of your app.

Facilitate web crawlers (SEO)

Improve performance on mobile and low-powered devices

Show the first page quickly

Search Engine Optimization (SEO)

Search engines like Google & Bing & social media sites like Facebook & Twitter rely on web crawlers to index your application content and make that content searchable on the web. These web crawlers may be unable to navigate and index your highly interactive Angular application as a human user could do, even though google’s engine does a pretty decent job of executing javascript.

An SSR application can generate a static version of your app that is easily searchable, linkable, and navigable without JavaScript. It also makes a site preview available since each URL returns a fully rendered page.

As it’s important for our app to be discoverable by search engines, this was the primary reason, I wanted to have SSR early in our development cycle. The primary page that needs to be server-side rendered is the dashboard.

Angular universal allows us to render on the server (without a need for web browser) with minimal change to our existing code.