Server Side Rendering

What's Angular Universal and why using Server Side Rendering is so important in Angular applications?

This section describes Angular Universal, a technology that renders Angular applications on the server.

A normal Angular application executes in the browser, rendering pages in the DOM in response to user actions.

Angular Universal executes on the server, generating static application pages that later get bootstrapped on the client. This means that the application generally renders more quickly, giving users a chance to view the application layout before it becomes fully interactive.

Why SSR is so important?

There are three main reasons to create a Universal version of your app.

1. Facilitate web crawlers through search engine optimization (SEO)

2. Improve performance on mobile and low-powered devices

3. Show the first page quickly with a first-contentful paint (FCP)

We recommend to target server side rendering for a production environment as it will benefit you with performance gains and will be super valuable to your business as it gives your SPA (single page application) SEO support for browser crawlers on top of user perceived performance gains.

On the other hand for a development environment we recommend you to stick with JIT (just in time) as it’s the fastest setup available and will ease the development experience with fast re-builds as you change code here and there. This is what we do using ng serve

How to add Angular Universal to this template?

This template already includes all the required configurations to add Angular Universal to your app so you don't have to worry about that.

You can easily prepare your app for server-side rendering using the Angular CLI.

To start rendering your app with Universal on your local system, use the following command and open a browser and navigate to http://localhost:4000/.

$ npm run build:ssr && npm run serve:ssr

The port where the app will run (in this case 4000) can be changed in src/environments/environment.prod.ts

You can find more information about Angular Universal here.

The important files for Angular Universal

src/main.server.ts - bootstrapper for server app

src/app/app.server.module.ts - server-side application module

server.ts - express web server

src/tsconfig.server.json - TypeScript server configuration

webpack.server.config.js - webpack server configuration

Testing your app with SSR

The transition from the server-rendered app to the client app happens quickly on a development machine, but you should always test your apps in real-world scenarios.

You can simulate a slower network to see the transition more clearly as follows:

1. Open the Chrome Dev Tools and go to the Network tab.

2. Find the Network Throttling dropdown on the far right of the menu bar.

3. Try one of the "3G" speeds.

The server-rendered app still launches quickly but the full client app may take seconds to load.