Introduction

In this chapter, we will add server-side rendering to the application that we built in the previous chapter. We will use ng generate to add Angular Universal to our application, and add a few commands to package.json so that we can build the whole app in a single command.

We will implement a simple Node.js server based on NestJS. This server will compile and serve our application when requested so that the complete rendered app gets sent to the browser.

How does a Normal App Render?

First, let's take a look at how a normal Angular application without server-side rendering behaves.

When we start the server in development mode using ng serve and use the View Source option in our browser to check the source, we can see that the only thing that gets rendered is the output from file src/index.html file, with a few scripts appended at the bottom.

These scripts will be downloaded by the browser and after they have been downloaded and executed, the application...