Server-side rendering (SSR) with Angular Universal for Better Performance

This article will guide you through how Server-side rendering (SSR) with Angular Universal is better for performance as well as other factors. Angular Universal is a technology that renders the application on the server.

In a normal scenario, the application executes in the browser and render pages in DOM. While in Angular universal static pages gets from the server and that gets bootstrapped into the client. This means the initial page will be rendered very quickly and it will improve the performance of the application.

Why Server-side rendering ?

There are 3 main reasons,
1) Better Search engine optimization visibility for web crawlers
2) Improve performance on mobile devices and other platforms
3) First contentful paint (FCP) – Show the first page quickly

Web Crawlers (Search Engine Optimization)

Social media sites like Facebook, Google, Bing, twitter etc. rely on web crawlers to index your application content and that will be visible on search.
Angular Univeral helps us to create a static version of the application and that will be easily searchable. Each URL of the application returns the rendered pages.

Improve performance on mobile devices and other platforms

Some of the devices do not support javascript and some of them doesn’t work properly and that is bad for user experience. In this case, you may need server-side rendering in place to resolve all those issues and that will help to improve performance.

First contentful paint (FCP) – Show the first page quickly

It is very important to show the first page very quickly for the user who lands to that page. Pages that load faster perform better, it should load the first page around 100ms and that can engage the user to stay on-site longer.
With Angular Universal, you can generate landing pages for the app that look like the complete app. In practice, you’ll serve a static version of the landing page to hold the user’s attention. At the same time, you’ll load the full Angular app behind it.

Installation

Let’s start with the installation of Angular Universal in your application,

To create the server-side app module, app.server.module.ts, run the following CLI command.

ng add @nguniversal/express-engine

Once your run above command this will generate a couple of new file along with the changes in the existing one. as shown below,

src/
  index.html                 app web page
  main.ts                    bootstrapper for client app
  main.server.ts             * bootstrapper for server app
  style.css                  styles for the app
  app/ ...                   application code
    app.server.module.ts     * server-side application module
server.ts                    * express web server
tsconfig.json                TypeScript base configuration
tsconfig.app.json            TypeScript browser application configuration
tsconfig.server.json         TypeScript server application configuration
tsconfig.spec.json           TypeScript tests configuration

In the above structure file showing with the * mark is he newly generated file for the server-side rendering.

Angular Universal in Action

To start rendering your app with Universal on your local system, use the following command.

npm run dev:ssr

Now your application will be running on local with angular universal.
The transition into the app you will see it runs very quickly but you should also test this app on real-world scenarios for better clarifications.

We can also play around with application on local with slow network speed to validate different scenarios. You can exactly follow as shown below to test.

• Open the Chrome Dev Tools and go to the Network tab.
• Find the Network Throttling dropdown on the far right of the menu bar.
• Try one of the “3G” speeds.

The server-side rendering app still launches quickly but the full client app may take seconds to load.

To get some of the more insights of the code and each function about web servers, Universal template engine, Serving static files all you can find that in below specified important links of Server-side rendering (SSR).

Important Links

Angular Universal Official Link – https://angular.io/guide/universal