Server-Side Rendering (SSR)

Overview

Server-Side Rendering (SSR) generates your Angular application’s HTML on the server, providing faster initial page loads, better SEO, and improved performance on low-powered devices.

Benefits of SSR

Better SEO

Search engines can crawl fully-rendered pages with content.

Faster First Paint

Users see content faster before JavaScript loads and executes.

Social Sharing

Preview images and metadata work correctly on social platforms.

Low-End Devices

Better performance on devices with limited processing power.

Setup

Adding SSR to Existing Application

Use Angular CLI to add SSR support:

ng add @angular/ssr

This command:

Installs necessary dependencies
Creates server-side configuration files
Updates angular.json with server build configuration
Adds server entry point files

Manual Setup

For more control, set up SSR manually:

// server.ts
import 'zone.js/node';
import { APP_BASE_HREF } from '@angular/common';
import { CommonEngine } from '@angular/ssr';
import * as express from 'express';
import { fileURLToPath } from 'node:url';
import { dirname, join, resolve } from 'node:path';
import bootstrap from './src/main.server';

const serverDistFolder = dirname(fileURLToPath(import.meta.url));
const browserDistFolder = resolve(serverDistFolder, '../browser');
const indexHtml = join(browserDistFolder, 'index.html');

const app = express();
const commonEngine = new CommonEngine();

// Serve static files
app.get('*.*', express.static(browserDistFolder, {
  maxAge: '1y'
}));

// All regular routes use the Angular engine
app.get('*', (req, res, next) => {
  const { protocol, originalUrl, baseUrl, headers } = req;

  commonEngine
    .render({
      bootstrap,
      documentFilePath: indexHtml,
      url: `${protocol}://${headers.host}${originalUrl}`,
      publicPath: browserDistFolder,
      providers: [
        { provide: APP_BASE_HREF, useValue: baseUrl }
      ],
    })
    .then((html) => res.send(html))
    .catch((err) => next(err));
});

export default app;

Server Configuration

Main Server Bootstrap

// main.server.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { config } from './app/app.config.server';

const bootstrap = () => bootstrapApplication(AppComponent, config);

export default bootstrap;

Server App Configuration

// app.config.server.ts
import { ApplicationConfig, mergeApplicationConfig } from '@angular/core';
import { provideServerRendering } from '@angular/platform-server';
import { appConfig } from './app.config';

const serverConfig: ApplicationConfig = {
  providers: [
    provideServerRendering()
  ]
};

export const config = mergeApplicationConfig(appConfig, serverConfig);

Rendering Applications

Using renderApplication

import { renderApplication } from '@angular/platform-server';
import { AppComponent } from './app/app.component';
import { appConfig } from './app/app.config';

async function render(url: string, document: string): Promise<string> {
  const html = await renderApplication(AppComponent, {
    appId: 'my-app',
    document,
    url,
    providers: [
      ...appConfig.providers
    ]
  });

  return html;
}

Using renderModule (NgModule)

import { renderModule } from '@angular/platform-server';
import { AppServerModule } from './app/app.server.module';

async function render(url: string, document: string): Promise<string> {
  const html = await renderModule(AppServerModule, {
    document,
    url,
    extraProviders: [
      // Additional server-specific providers
    ]
  });

  return html;
}

Platform-Specific Code

Detecting Platform

Use platform checks to run code conditionally.

import { Component, Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser, isPlatformServer } from '@angular/common';

@Component({
  selector: 'app-platform-aware',
  template: `
    <div>
      <p>Platform: {{ platform }}</p>
      <p *ngIf="isBrowser">Window width: {{ windowWidth }}</p>
    </div>
  `
})
export class PlatformAwareComponent {
  platform: string;
  isBrowser: boolean;
  windowWidth?: number;

  constructor(@Inject(PLATFORM_ID) private platformId: object) {
    this.isBrowser = isPlatformBrowser(platformId);
    this.platform = this.isBrowser ? 'Browser' : 'Server';

    if (this.isBrowser) {
      this.windowWidth = window.innerWidth;
    }
  }
}

Conditional Browser APIs

import { Component, Inject, PLATFORM_ID, OnInit } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

@Component({
  selector: 'app-local-storage',
  template: `
    <div>
      <input 
        [(ngModel)]="value" 
        (input)="save()"
        placeholder="Type something..."
      >
      <p>Stored value: {{ storedValue }}</p>
    </div>
  `
})
export class LocalStorageComponent implements OnInit {
  value = '';
  storedValue = '';
  private isBrowser: boolean;

  constructor(@Inject(PLATFORM_ID) platformId: object) {
    this.isBrowser = isPlatformBrowser(platformId);
  }

  ngOnInit(): void {
    if (this.isBrowser) {
      this.storedValue = localStorage.getItem('myValue') || '';
      this.value = this.storedValue;
    }
  }

  save(): void {
    if (this.isBrowser) {
      localStorage.setItem('myValue', this.value);
      this.storedValue = this.value;
    }
  }
}

HTTP and Data Transfer

TransferState

Avoid duplicate HTTP requests by transferring data from server to client.

import { Component, OnInit } from '@angular/core';
import { 
  makeStateKey, 
  TransferState 
} from '@angular/platform-browser';
import { HttpClient } from '@angular/common/http';

interface User {
  id: number;
  name: string;
  email: string;
}

const USERS_KEY = makeStateKey<User[]>('users');

@Component({
  selector: 'app-users',
  template: `
    <div *ngIf="users">
      <h2>Users</h2>
      <ul>
        <li *ngFor="let user of users">
          {{ user.name }} - {{ user.email }}
        </li>
      </ul>
    </div>
    <p *ngIf="!users">Loading...</p>
  `
})
export class UsersComponent implements OnInit {
  users?: User[];

  constructor(
    private http: HttpClient,
    private transferState: TransferState
  ) {}

  ngOnInit(): void {
    // Check if data exists in transfer state
    const cachedUsers = this.transferState.get(USERS_KEY, null);

    if (cachedUsers) {
      // Use cached data from server
      this.users = cachedUsers;
    } else {
      // Fetch data and store for transfer
      this.http.get<User[]>('/api/users').subscribe(users => {
        this.users = users;
        this.transferState.set(USERS_KEY, users);
      });
    }
  }
}

HTTP Interceptor for TransferState

import { Injectable } from '@angular/core';
import {
  HttpInterceptor,
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpResponse
} from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { tap } from 'rxjs/operators';
import { TransferState, makeStateKey } from '@angular/platform-browser';

@Injectable()
export class TransferStateInterceptor implements HttpInterceptor {
  constructor(private transferState: TransferState) {}

  intercept(
    req: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    // Only cache GET requests
    if (req.method !== 'GET') {
      return next.handle(req);
    }

    const key = makeStateKey(req.url);
    const cachedResponse = this.transferState.get(key, null);

    if (cachedResponse) {
      // Remove from transfer state after using
      this.transferState.remove(key);
      return of(new HttpResponse({ body: cachedResponse, status: 200 }));
    }

    return next.handle(req).pipe(
      tap(event => {
        if (event instanceof HttpResponse) {
          this.transferState.set(key, event.body);
        }
      })
    );
  }
}

Pre-rendering (SSG)

Generate static pages at build time for even better performance.

Configuration

// angular.json
{
  "projects": {
    "my-app": {
      "architect": {
        "prerender": {
          "builder": "@angular-devkit/build-angular:prerender",
          "options": {
            "routes": [
              "/",
              "/about",
              "/contact",
              "/blog/post-1",
              "/blog/post-2"
            ]
          },
          "configurations": {
            "production": {
              "browserTarget": "my-app:build:production",
              "serverTarget": "my-app:server:production"
            }
          }
        }
      }
    }
  }
}

Dynamic Route Discovery

// routes.txt or routes generator
import { writeFileSync } from 'fs';
import { join } from 'path';

interface BlogPost {
  slug: string;
}

async function generateRoutes(): Promise<void> {
  // Fetch dynamic routes from API or database
  const posts: BlogPost[] = await fetchBlogPosts();
  
  const routes = [
    '/',
    '/about',
    '/contact',
    ...posts.map(post => `/blog/${post.slug}`)
  ];

  // Write routes to file
  const routesFile = join(__dirname, 'routes.txt');
  writeFileSync(routesFile, routes.join('\n'));
}

async function fetchBlogPosts(): Promise<BlogPost[]> {
  // Fetch from your API or database
  return [];
}

generateRoutes();

SEO Optimization

Meta Tags Service

import { Injectable } from '@angular/core';
import { Meta, Title } from '@angular/platform-browser';

@Injectable({ providedIn: 'root' })
export class SeoService {
  constructor(
    private meta: Meta,
    private title: Title
  ) {}

  updateMetaTags(config: {
    title: string;
    description: string;
    image?: string;
    url?: string;
    type?: string;
  }): void {
    // Update title
    this.title.setTitle(config.title);

    // Update meta tags
    this.meta.updateTag({ name: 'description', content: config.description });
    
    // Open Graph tags
    this.meta.updateTag({ property: 'og:title', content: config.title });
    this.meta.updateTag({ property: 'og:description', content: config.description });
    this.meta.updateTag({ property: 'og:type', content: config.type || 'website' });
    
    if (config.image) {
      this.meta.updateTag({ property: 'og:image', content: config.image });
    }
    
    if (config.url) {
      this.meta.updateTag({ property: 'og:url', content: config.url });
    }

    // Twitter Card tags
    this.meta.updateTag({ name: 'twitter:card', content: 'summary_large_image' });
    this.meta.updateTag({ name: 'twitter:title', content: config.title });
    this.meta.updateTag({ name: 'twitter:description', content: config.description });
    
    if (config.image) {
      this.meta.updateTag({ name: 'twitter:image', content: config.image });
    }
  }
}

Using SEO Service

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { SeoService } from './seo.service';

interface BlogPost {
  title: string;
  description: string;
  image: string;
  slug: string;
}

@Component({
  selector: 'app-blog-post',
  template: `
    <article *ngIf="post">
      <h1>{{ post.title }}</h1>
      <img [src]="post.image" [alt]="post.title">
      <p>{{ post.description }}</p>
    </article>
  `
})
export class BlogPostComponent implements OnInit {
  post?: BlogPost;

  constructor(
    private route: ActivatedRoute,
    private seo: SeoService
  ) {}

  ngOnInit(): void {
    this.route.data.subscribe(data => {
      this.post = data['post'];
      
      if (this.post) {
        this.seo.updateMetaTags({
          title: this.post.title,
          description: this.post.description,
          image: this.post.image,
          url: `https://example.com/blog/${this.post.slug}`,
          type: 'article'
        });
      }
    });
  }
}

Best Practices

Use TransferState

Avoid duplicate HTTP requests by transferring data from server to client.

Lazy Load Heavy Components

Defer loading of non-critical components to improve initial render time.

Handle Platform Differences

Always check platform before accessing browser-only APIs.

Optimize Images

Use responsive images and lazy loading for better performance.

Avoid using browser-specific APIs like window, document, localStorage without platform checks. These will cause errors during server-side rendering.

Overview

Getting Started

Core Concepts

Routing & Navigation

Forms

HTTP & APIs

Advanced Topics

CLI & Tools

Best Practices

​Overview

​Benefits of SSR

Better SEO

Faster First Paint

Social Sharing

Low-End Devices

​Setup

​Adding SSR to Existing Application

​Manual Setup

​Server Configuration

​Main Server Bootstrap

​Server App Configuration

​Rendering Applications

​Using renderApplication

​Using renderModule (NgModule)

​Platform-Specific Code

​Detecting Platform

​Conditional Browser APIs

​HTTP and Data Transfer

​TransferState

​HTTP Interceptor for TransferState

​Pre-rendering (SSG)

​Configuration

​Dynamic Route Discovery

​SEO Optimization

​Meta Tags Service

​Using SEO Service

​Best Practices

Use TransferState

Lazy Load Heavy Components

Handle Platform Differences

Optimize Images

​Additional Resources

Build docs developers (and LLMs) love

Overview

Benefits of SSR

Setup

Adding SSR to Existing Application

Manual Setup

Server Configuration

Main Server Bootstrap

Server App Configuration

Rendering Applications

Using renderApplication

Using renderModule (NgModule)

Platform-Specific Code

Detecting Platform

Conditional Browser APIs

HTTP and Data Transfer

TransferState

HTTP Interceptor for TransferState

Pre-rendering (SSG)

Configuration

Dynamic Route Discovery

SEO Optimization

Meta Tags Service

Using SEO Service

Best Practices

Additional Resources