Angular Universal (SSR)

Angular uses client-side rendering by default. The ng build [--prod] command generates static assets (an index.html file, JavaScript bundles and a copy of your assets/ directory), which can be statically hosted without any server-side code (with all paths redirected to index.html). The HTML file merely links to scripts that take care of bootstrapping Angular and running your compiled app code. This makes for a fast UX, but is also problematic if SEO is required (web crawlers have to execute JavaScript to see your content).

An alternative for such cases is to use Angular Universal, which implements server-side rendering. Instead of hosting static assets, your app is deployed as a Node.js server (using the Express framework). The first time a user visits your app, the server renders Angular components needed to display the requested path, waiting for all detected asynchronous operations to finish before responding. The resulting HTML contains all loaded content, as well as links for scripts that load Angular and make your app interactive (so-called hydration). Note that this means your initialization code is run in Node.js as well as the browser - this article points out some common errors that this may cause.

📖 Documentation

• official Angular Universal docs

🦮 Guide

In an existing Angular project, run the following schematic:

ng add @nguniversal/express-engine