How does a normal app render?

Let's first take a look at how a normal Angular application without server-side rendering behaves.

When we start our server in development mode, using ng serve, and we use the View Source option in our browser to check the source, we see that the only thing that gets rendered is the output from our 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 will display:

While this works in some situations, in others this can become problematic. If the user of your app is on a slow connection or slow device, it will take time to load and parse the scripts, and during that waiting time, the user sees a blank page.

Another issue is that most search engines and social media sites will only read the initial payload of our website and will not download and execute our client-side JavaScript files.

These are the things that...