Server-Side Rendering (SSR)

Server-Side Rendering (SSR) improves the performance and SEO of Angular applications by rendering pages on the server. This guide covers setting up and using SSR in Angular with Angular Universal.

Setting Up Angular Universal

First, ensure that your Angular application is set up to use Angular Universal by adding the necessary dependencies:

ng add @nguniversal/express-engine

Configuring SSR with Angular Universal

After adding Angular Universal, update your application to use the Express engine for SSR:

// server.ts
import 'zone.js/dist/zone-node';
import { ngExpressEngine } from '@nguniversal/express-engine';
import * as express from 'express';
import { join } from 'path';

import { AppServerModule } from './src/main.server';
import { APP_BASE_HREF } from '@angular/common';
import { existsSync } from 'fs';

const app = express();

const distFolder = join(process.cwd(), 'dist/browser');
const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';

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

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

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

app.get('*', (req, res) => {
  res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
});

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

Updating Angular Configuration

Update the angular.json file to include server and browser configurations:

// angular.json
{
  ...
  "projects": {
    "app": {
      ...
      "architect": {
        "build": {
          ...
        },
        "serve": {
          ...
        },
        "server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist/server",
            "main": "src/main.server.ts",
            "tsConfig": "tsconfig.server.json"
          }
        },
        "prerender": {
          "builder": "@nguniversal/builders:prerender",
          "options": {
            "browserTarget": "app:build:production",
            "serverTarget": "app:server:production",
            "routes": ["/"]
          }
        }
      }
    }
  }
}

Creating Server Module

Create a server module to handle the server-side rendering:

// app.server.module.ts
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 {}

Modifying Main Server Entry Point

Modify the main server entry point to bootstrap the server module:

// main.server.ts
import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

export { AppServerModule } from './app/app.server.module';

Running the Application

Build and run the Angular Universal application using the following commands:

ng build --prod
ng run app:server
node dist/server

Key Points

Conclusion

Server-Side Rendering (SSR) enhances the performance and SEO of your Angular applications by enabling server-side rendering. By setting up Angular Universal, configuring the Express engine, and running your application, you can provide a better user experience and improve search engine visibility. Happy coding!