Angular Universal and Server Side Rendering Step-By-Step

Angular Universal is not easy to get right the first time.

Well, it turns out, it is not that hard at all!

Once you understand how it actually works, setting up a working application will be easy for you. In fact, creating a fully functional angular universal application will not take you longer than 1 hour!

In this tutorial, I will show you exactly what angular universal is and how it works. Once we got the basics, we will dive right into code! By turning a basic angular-cli project into a functional universal application, you will not only see how it is done step-by-step. You will also end up with a working template for server side rendering, you can use for your future angular adventures. All you need to get started started is in this angular universal tutorial.

So let's dive right in!

What is Angular Universal?

Angular Universal once was a standalone project. It's main purpose was, to enable angular to run angular completely platform independent.

"Wait? Why do you speak in past tense?"

Because with version 4.0 of angular, angular universal got merged into the main framework. It now ships with together with the core angular packages. The names of the packages are platform-server and platform-browser.

Angular is now capable of running equally on most platforms. Most importantly, it can be run on a server now. This enables a whole set a of new capabilities, like rendering angular to html on the server. But how does that even work?

Rendering Angular on a Server

At its core, angular is just an html parser. When you create your angular application, your templates are parsed from HTML markup to JavaScript code. This JavaScript code will then create the parsed HTML elements at run-time in the browser. But rendering that HTML now requires the full angular (core) framework to be downloaded.

As we learned before, angular is also capable of running on node.js servers. Because of that, it is also possible to generate that parsed HTML on the server. The result is just a bunch of HTML, that the server can then send to the client.

Classic Approach:

Here is how angular is normally loaded. The angular framework has to be downloaded. The user sees nothing in his browser window, until the full angular code is downloaded and bootstrapped.

Server Side Rendered:

When we render angular on the server, all that has to travel over the wire is the html itself. To give you some numbers here. An html document for a blog article might be aground 50kb gziped. Not counting images etc. of course. On the other side, you will have a hard time bringing angular to under 150kb gziped. And that number does not contain the content of the page itself. It's just the size of angular JavaScript files. That is more than tree times the size! Now imagine your mobile users. That is three times the time, your app takes to download (approximately).

Static vs. Dynamic

Continue reading...