How to Enable Server-Side Rendering and PWA for Your Angular App

Skyrocket the performance of your Angular app by enabling SSR and PWA

TL;DR What are SSR and PWA? Why would you want to enable SSR and PWA for your application? Well, if you want a fast and high-performance solid app that also supports working offline + SEO you should start considering using them.

Photo by SpaceX on Unsplash

For the ones who see any of those terms the first time, would be better to start with some explanation.

What is Server-Side Rendering

Server-side rendering (SSR) is the process of rendering web pages on the server and passing them to the browser (client), instead of rendering them in the browser. SSR sends a fully rendered page to the client and then the client’s JavaScript bundle takes over and enables the SPA framework to operate.

In our journey, we will use Angular. Angular uses a built-in tool (Angular Universal) to help you enable SSR.

The Angular CLI compiles and bundles the Universal version of the app with the Ahead-of-Time (AOT) compiler. A Node.js Express web server compiles HTML pages with Universal based on client requests.

Why use server-side rendering?

There are lots of benefits of using SSR. But the main three benefits are:

1. Facilitate web crawlers through search engine optimization (SEO)
2. Improve performance on mobile and low-powered devices
3. Show the first page quickly with a first-contentful paint (FCP)

I’m not going to go deep into these concepts. The main goal of this article is to give some general understanding of SSR and PWA. However, if you are into increasing the performance of your application better check them in this link:

Angular Universal

What is Progressive Web Application (PWA)

A progressive web app (PWA) is nothing but a normal web application with extra useful cool features. Namely:

• Ability to run offline
• High performance
• Background processing in service workers in a separate thread
• Access to the phone’s sensors
• Support for push notifications
• An icon on the phone’s home screen

So, no wonder you want to enable it for your app 🤓

Also, you can find detailed information on this link:

Angular

Now since you are more familiar with the concept, we can start building an Angular project from scratch. I will try to explain step by step how to enable SSR and PWA for your project.

1 — Let’s create an Angular app

First, you need to install the Angular CLI tool to create an Angular project:

npm install -g @angular/cli

Now we can create a project:

ng new my-hilarious-app

You can select your preferred options for prompted questions. These are my choices:

After successful installation of packages you should see something like this:

OK, so now we created an Angular app and we can test it by running:

cd my-hilarious-app
ng serve

Your app should be running on http://localhost:4200/:

Great! You created your Angular app up and running 🥳

Let’s have a look at our app’s performance by creating a Lighthouse report for the mobile version. Open your browser’s console (I use chrome). Go to the Lighthouse tab and check all categories. For the Device section, it is always better to generate the report for mobile because Lighthouse will throttle the network according to mobile speed. The desktop will always have better performance. It is better to take the mobile as a reference.

Now click on Generate report button. It will generate the report for you:

Ok, so our app’s performance is 44 out of 100, which is really bad. Besides as you can see currently our app does not support PWA feature. Now we will enable SSR and PWA for our app and let’s generate another report afterward and compare them 🤓

2 — Let’s enable SSR

Run this command to install necessary packages for SSR:

ng add @nguniversal/express-engine

The command creates the following folder structure:

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

You can run SSR enabled app by running:

npm run dev:ssr

If you see the same page as it was before SSR, then you have an SSR enabled angular app 🥳

3 — Let’s enable PWA

To enable PWA we have to add service workers to our project. A service worker itself standalone is another topic for another blog post. I’m not going to explain how service workers work. But you can check out from this link:

Angular

We will add service workers by using Angular CLI:

ng add @angular/pwa --project my-hilarious-app

The above command completes the following actions:

1. Adds the @angular/service-worker package to your project.

2. Enables service worker build support in the CLI.

3. Imports and registers the service worker in the app module.

4. Updates the index.html file:

• Includes a link to add the manifest.webmanifest file.
• Adds meta tags for theme-color.

5. Installs icon files to support the installed Progressive Web App (PWA).

6. Creates the service worker configuration file called ngsw-config.json, which specifies the caching behaviors and other settings.

Now let’s build the project:

npm run build:ssr

Now we can start our application by running:

node dist/my-hilarious-app/server/main.js

Most probably it will work on http://localhost:4000 (you can check your terminal output for the accurate port).

You can confirm our service worker for PWA is working by opening your dev tools on your browser and going to the Application tab. And then click on Service Workers on the side menu. If you see next to the status that it is saying #x activated and is running with a green dot, it means our service worker is up and running perfectly. 🥳

Let’s generate a Lighthouse report again:

Wow, we did it 🎉. The performance is 100 out of 100. Besides we have PWA feature enabled. 🚀

I hope this article was useful to you. If you have any questions or comments please do let me know in the comments section.

May the force be with you 🤓