Angular Universal: Server-Side Rendering (SSR) Guide

In the previous chapter, we discussed how to deploy an Angular application to a server. In this chapter, we’ll dive deeper into Angular Universal, Angular’s official solution for implementing Server-Side Rendering (SSR).

What Is Angular Universal?

Angular Universal is a technology that enables rendering Angular applications on the server. By leveraging SSR, you can significantly improve application performance, enhance SEO (Search Engine Optimization), and deliver a better user experience. With Angular Universal, your application generates HTML on the server—meaning users see rendered content immediately upon visiting the page, without waiting for JavaScript to load and execute.

Benefits of Server-Side Rendering

Using Angular Universal for SSR offers several key advantages:

1. Improved Load Time: Since HTML is pre-rendered on the server, the time to first meaningful paint (i.e., initial screen load) is drastically reduced.
2. SEO-Friendly: Many search engines struggle to effectively index SPAs (Single-Page Applications), but with SSR, each page’s content becomes fully crawlable and indexable.
3. Better Social Media Sharing: When sharing your web pages, social media platforms can reliably fetch and display accurate preview metadata (e.g., title, description, image).

How to Implement Angular Universal

Let’s walk through the step-by-step process of integrating server-side rendering into your Angular application.

1. Install Angular Universal

First, install the required packages: @nguniversal/express-engine and @nguniversal/module-map-ngfactory-loader. Run the following command in your terminal:

ng add @nguniversal/express-engine

This command automatically sets up Angular Universal and generates all necessary files.

2. Configure Your Application

After running the above command, several new files will be added to your project directory—for example, server.ts and app.server.module.ts. Below is a basic example of server.ts:

import 'zone.js/dist/zone-node';
import { enableProdMode } from '@angular/core';
import { ngExpressEngine } from '@nguniversal/express-engine';
import * as express from 'express';
import { join } from 'path';
import { AppServerModule } from './dist/YOUR_PROJECT_NAME/server/main';

enableProdMode();

const app = express();

const PORT = process.env.PORT || 4000;
const DIST_FOLDER = join(process.cwd(), 'dist/YOUR_PROJECT_NAME/browser');

app.engine('html', ngExpressEngine({
  bootstrap: AppServerModule,
}));

app.set('view engine', 'html');
app.set('views', DIST_FOLDER);

app.get('*', (req, res) => {
  res.render('index', { req });
});

app.listen(PORT, () => {
  console.log(`Node server listening on http://localhost:${PORT}`);
});

3. Build the Application

Next, build both the browser and server bundles using the following command:

npm run build:ssr

Ensure your package.json includes the following three scripts:

"scripts": {
  "build": "ng build --prod",
  "serve": "node dist/YOUR_PROJECT_NAME/server/main.js",
  "build:ssr": "ng build --prod && ng run YOUR_PROJECT_NAME:server:production"
}

4. Run the Application

Once built, start the SSR-enabled application:

npm run serve

Visit http://localhost:4000, and you’ll see your Angular application rendered on the server.

5. Deploy to Production

Just like standard Angular deployments, Angular Universal apps can be deployed to cloud platforms supporting Node.js—such as Heroku, AWS, or any other compatible provider. After configuring your environment, simply run npm run build:ssr followed by npm run serve.

Example Code

Here’s a simple illustration of how Angular Universal renders a component. Suppose you have a component named hello-world, defined as follows:

import { Component } from '@angular/core';

@Component({
  selector: 'app-hello-world',
  template: `<h1>Hello, World!</h1>`,
})
export class HelloWorldComponent {}

To make it accessible at /hello, add the route in app.routing.module.ts:

const routes: Routes = [
  { path: 'hello', component: HelloWorldComponent },
];

Angular Universal will then render HelloWorldComponent on the server when that route is requested.

Summary

In this chapter, we explored the core concepts and configuration steps for Angular Universal, and demonstrated SSR implementation with practical code examples. By adopting Angular Universal, you can substantially boost application performance, improve SEO, and provide a faster, more responsive experience for end users.

In the next chapter, we’ll continue exploring performance optimization strategies for Angular applications—ensuring excellence across every dimension, from responsiveness to perceived speed and overall UX.