Book Image

Beginning Server-Side Application Development with Angular

By : Bram Borggreve
Book Image

Beginning Server-Side Application Development with Angular

By: Bram Borggreve

Overview of this book

Equip yourself with the skills required to create modern, progressive web applications that load quickly and efficiently. This fast-paced guide to server-side Angular leads you through an example application that uses Angular Universal to render application pages on the server, rather than the client. You'll learn how to serve your users views that load instantly, while reaping all the SEO benefits of improved page indexing. With differences of just 200 milliseconds in performance having a measurable impact on your users, it's more important than ever to get server-side right.
Table of Contents (10 chapters)

Chapter 3. Server-Side Rendering

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...