Server-Side Rendering (SSR) with Angular Universal

Introduction to Server-Side Rendering (SSR)

In the modern web development landscape, performance and search engine optimization (SEO) are critical factors in delivering successful applications. Single-page applications (SPAs) built with Angular suffer from a fundamental limitation: they rely on client-side rendering (CSR), which can lead to slow initial page loads and suboptimal SEO. To address these challenges, Angular Universal provides server-side rendering (SSR) capabilities that significantly enhance performance and improve discoverability by search engines.

What is Angular Universal?

Angular Universal is a technology that enables Angular applications to be rendered on the server instead of the client’s browser. This means that the HTML content is pre-rendered on the server before being sent to the browser, which improves perceived performance and ensures that search engine crawlers can easily index the page.

Benefits of Server-Side Rendering in Angular

1. Improved SEO: Search engines prefer HTML content over JavaScript-rendered pages. With SSR, Angular applications serve fully rendered HTML, enhancing search rankings.
2. Faster Initial Load Times: Since the server pre-renders the HTML, users experience quicker page loads compared to traditional client-side rendering.
3. Better Performance on Low-Powered Devices: Users on low-end devices benefit as less processing is required on the client-side.
4. Enhanced Social Media Sharing: When sharing URLs on social platforms, metadata such as page titles and descriptions are correctly displayed.
5. Increased Accessibility: Pre-rendered content benefits screen readers and improves usability for all users.

Setting Up Angular Universal

To integrate Angular Universal into an existing Angular application, follow these steps:

1. Install Angular Universal

Use the Angular CLI to add Angular Universal to your project:

ng add @angular/universal

This command automatically updates the necessary files and configurations, including:

• Installing required dependencies (@angular/platform-server)
• Creating a server.ts file for the Express server
• Updating angular.json with SSR configurations

2. Modify the Application for SSR

The entry module needs adjustments to support server-side rendering. Open app.server.module.ts and ensure it imports the required dependencies:

import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { AppModule } from './app.module';
import { AppComponent } from './app.component';

@NgModule({
  imports: [
    AppModule,
    ServerModule
  ],
  bootstrap: [AppComponent]
})
export class AppServerModule {}

3. Create an Express Server

By default, Angular Universal uses an Express server to handle requests. Open server.ts and configure the server to render Angular on the backend:

import 'zone.js/node';
import { ngExpressEngine } from '@nguniversal/express-engine';
import * as express from 'express';
import { join } from 'path';
import { APP_BASE_HREF } from '@angular/common';
import { existsSync } from 'fs';

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

const { AppServerModule } = require('./dist/server/main');

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

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

app.get('*.*', express.static(DIST_FOLDER, {
  maxAge: '1y'
}));

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

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

4. Build and Serve the Application

To build the Angular Universal app, run:

npm run build:ssr

Start the server:

npm run serve:ssr

Visit http://localhost:4000 to see the SSR-enabled Angular application in action.

Optimizing SSR Performance

Once SSR is enabled, further optimizations can be made to maximize performance.

1. Use Lazy Loading

Lazy loading ensures that only the necessary modules are loaded initially, improving SSR response times:

const routes: Routes = [
  {
    path: 'feature',
    loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule)
  }
];

2. Enable Preboot

Preboot improves user experience by recording user interactions while Angular bootstraps on the client:

@NgModule({
  imports: [BrowserModule.withServerTransition({ appId: 'serverApp' })],
  bootstrap: [AppComponent]
})
export class AppModule {}

3. Use Transfer State API

The Transfer State API helps avoid redundant API calls by passing data from the server to the client:

import { TransferState, makeStateKey } from '@angular/platform-browser';

const DATA_KEY = makeStateKey<any>('data');

this.http.get('/api/data').subscribe(data => {
  this.transferState.set(DATA_KEY, data);
});

Handling Dynamic Content with SSR

Certain dynamic content like authentication tokens and user-specific data should be handled cautiously. Use cookies or session storage instead of embedding sensitive data in the pre-rendered HTML.

Deploying SSR Applications

Deploying an SSR-enabled Angular app is similar to deploying a standard Node.js application. Common hosting solutions include:

• Firebase Hosting: Integrate with Firebase Functions for SSR.
• Vercel: Easy deployment with automatic SSR support.
• Heroku: Deploy using a Node.js buildpack.
• AWS Lambda: Utilize serverless architectures with AWS Lambda and API Gateway.

Conclusion

Server-Side Rendering with Angular Universal is a powerful technique to enhance performance, improve SEO, and provide a better user experience. By implementing SSR, developers can ensure faster page loads, optimized search engine indexing, and improved accessibility. Adopting best practices like lazy loading, transfer state API, and Preboot further refines the SSR experience, making Angular applications more efficient and user-friendly.

By following the steps outlined in this guide, developers can successfully integrate Angular Universal into their projects, leading to better-performing applications that stand out in today’s competitive web landscape.