Angular Universal is Server-Side-Rendered Angular

Did you know you can greatly improve the performance of your Angular apps with Angular Universal?

It's pretty amazing in that you can boost the performance of an Angular app from a Lighthouse score from 66 to 95+ points -- with the right techniques.

But what is this magic Angular Universal and how do we use it in our apps? Well it helps to look at the problem first. Single-page-apps (SPAs) have at least one big pitfall: they are rendered in the browser rather than on the server. When we render a "normal" Angular app - we first have to download the code and then run the app.

To understand the problem in more detail, consider the browser's simplified workflow. The browser:

• Establishes a connection with the server (queries DNS, sets up an SSL connection, etc.) and requests data.

• Retrieves the data.

• Renders HTML.

• Applies CSS.

• Bootstraps JavaScript.

As you can see, the moment when your Angular application is bootstrapped is at the very end of the workflow. That's why it takes so long to render the first contentful paint.

SPAs have one more pitfall. Because content is rendered in the browser, the index.html file shipped to the end user has no content. What if your end-user is a web crawler? If you try to curl a basic Angular app, you'll notice that you don't get the full HTML of the first view of your app, but instead get the tiny HTML file that loads the code. This is less-than-ideal for many situations.

This changes with Angular Universal.

With Angular Universal you're able to render your Angular app on the server (!). This means that the HTML that is shipped to your end-user is your rendered app - from the first request sent over.

And what's great is, you can even make database calls or serve authenticated content with the right configuration. I'll teach you how.

The basic idea is this: you use @angular/platform-server with @nguniversal/express-engine to render your Angular app in Node.js.

Applying schematics#

Starting your adventure with Angular Universal is as simple as applying a single command using the Angular CLI. Navigate to your project root directory and type the following in the terminal:

Angular CLI will install all the necessary dependencies for you and apply schematics (a set of instructions on how to adjust the project). After applying the schematics, you should see the summary output of what has been changed, added, or deleted in your project:

Dependencies and scripts#

The backbone of your project is the package.json file. Angular CLI has installed new dependencies there that are necessary to run Angular in the Node.js runtime environment:

Another change is in the scripts section, where Angular has added dev:ssr, build:ssr, serve:ssr, and prerender. We'll talk more about these later.

Rendering on the server requires a server#

So if you peek inside the server.ts file that gets generated, it looks like this:

Starting off, we import a few things, the important part being @nguniversal/express-engine which is, as you might guess, an engine for Express to render Angular apps.

We also import AppServerModule which comes from our app. Continuing on, here's the meat of our server. I'll explain a few bits below:

The key part above is that ngExpressEngine bootstraps the Angular framework using the AppServerModule object imported from src/main.server.ts. That's the entry point of the application and what's responsible for the bulk of the smarts.

server.get('*.*'), is responsible for hosting all other assets that the browser will request (e.g. images).

Finally we run the server like we would with a "normal" express application:

With the code above, we're on our way to rendering a high-performance server-side Angular app. Amazing! If you're interested in learning more check out the course Mastering Angular Universal: Build Blazing-fast Server-Side-Rendered Angular App