In this section, we will explore what a server-side rendering is, why we need it in our applications, and how we can use it with Angular.

For our purpose, we'll explain the typical flow of events when a user opens a SPA implemented in Angular. First, we'll trace the events with the server-side rendering disabled, and after that, we'll see how we can benefit from this feature by enabling it. Our example will be illustrated in the context of HTTP 1.1:

Figure 2

Figure 2 shows the first request by the browser and the corresponding server's response when loading a typical SPA. The result that the client will see initially is the content of the HTML page without any rendered components.

Let's suppose that we deploy the to-do application we built in Chapter 4, Getting Started with Angular Components and Directives, to a web server that has the example.com domain associated with it.

Once the user navigates to https://example.com/, the browser will open a new HTTP GET request...