Angular Ssr

Angular SSR is a community skill for implementing server-side rendering in Angular applications, covering Angular Universal setup, hydration, transfer state, route-level rendering strategies, and static site generation patterns.

What Is This?

Overview

Angular SSR provides patterns for rendering Angular applications on the server for improved performance and SEO. It covers Angular Universal setup with Express server integration for server-side HTML generation, client hydration that preserves server-rendered DOM and attaches event handlers without re-rendering, transfer state that passes data fetched on the server to the client to avoid duplicate API calls, route-level rendering strategies with server, client, and prerender options per route, and static site generation that pre-renders routes at build time for CDN deployment. The skill enables developers to build Angular applications with fast first paint and search engine crawlability.

Who Should Use This

This skill serves Angular developers improving initial load performance with server-side rendering, teams building content-heavy sites that require search engine optimization, and engineers implementing hybrid rendering strategies with per-route configuration.

Why Use It?

Problems It Solves

Client-side rendered Angular apps show blank pages until JavaScript loads and executes. Search engines may not properly index client-rendered content. Initial API calls on the client add latency after the JavaScript bundle loads. Hydration without transfer state causes visible content flickering as client re-fetches data.

Core Highlights

Server rendering generates complete HTML for fast first contentful paint. Incremental hydration attaches interactivity without re-rendering the DOM. Transfer state eliminates duplicate data fetching between server and client. Route-level config allows mixing SSR, CSR, and prerender per page.

How to Use It?

Basic Usage

// app.config.server.ts
import { mergeApplicationConfig }
  from '@angular/core';
import {
  provideServerRendering }
  from '@angular/platform-server';
import {
  provideServerRouting }
  from '@angular/ssr';
import { appConfig } from
  './app.config';
import { serverRoutes } from
  './app.routes.server';

export const serverConfig =
  mergeApplicationConfig(
    appConfig, {
      providers: [
        provideServerRendering(),
        provideServerRouting(
          ...serverRoutes),
      ],
    });

// app.routes.server.ts
import { RenderMode,
  ServerRoute } from
    '@angular/ssr';

export const serverRoutes:
  ServerRoute[] = [
  {
    path: '',
    renderMode:
      RenderMode.Prerender,
  },
  {
    path: 'dashboard',
    renderMode:
      RenderMode.Client,
  },
  {
    path: '**',
    renderMode:
      RenderMode.Server,
  },
];

Real-World Examples

// Transfer state for data
import { Injectable } from
  '@angular/core';
import { HttpClient } from
  '@angular/common/http';
import { TransferState,
  makeStateKey } from
    '@angular/core';
import { of, tap } from 'rxjs';

const PRODUCTS_KEY =
  makeStateKey<Product[]>(
    'products');

@Injectable({ providedIn:
  'root' })
export class ProductService {
  constructor(
    private http: HttpClient,
    private state:
      TransferState
  ) {}

  getProducts() {
    // Check transfer state
    const cached =
      this.state.get(
        PRODUCTS_KEY, null);
    if (cached) {
      this.state.remove(
        PRODUCTS_KEY);
      return of(cached);
    }

    // Fetch and store
    return this.http.get<
        Product[]>(
          '/api/products')
      .pipe(tap(
        (products) => {
          this.state.set(
            PRODUCTS_KEY,
            products);
        }));
  }
}

Advanced Tips

Use RenderMode.Prerender for static content pages and RenderMode.Server for dynamic user-specific pages. Implement provideClientHydration with withEventReplay for capturing user interactions during hydration. Use isPlatformBrowser guards for code that accesses window or document objects which are unavailable on the server. Enable withHttpTransferCacheOptions to automatically cache HTTP responses in transfer state without manual service-level caching.

When to Use It?

Use Cases

Build a marketing site with prerendered pages for fast loading and SEO. Implement an e-commerce product page with server rendering and transfer state for instant content. Create a hybrid application with SSR for public pages and client-only rendering for authenticated dashboards.

Related Topics

Angular Universal, server-side rendering, hydration, static site generation, and transfer state.

Important Notes

Requirements

Angular 17 or later for the new SSR APIs and render mode configuration. Node.js server environment for server-side rendering. Angular CLI with @angular/ssr package installed.

Usage Recommendations

Do: use transfer state to prevent duplicate API calls between server and client. Configure render mode per route to optimize each page type. Guard browser-specific code with isPlatformBrowser checks.

Don't: access DOM APIs directly in services or components that run on the server. Server-render pages with heavy client-side interactivity that hydration cannot replicate smoothly. Skip transfer state causing visible content flicker during hydration.

Limitations

Server rendering adds server infrastructure requirements and deployment complexity. Third-party libraries that access browser APIs may fail during server rendering. Hydration mismatches between server and client HTML cause re-rendering which defeats the performance benefit. Prerender requires known route paths at build time limiting dynamic route pre-generation without additional configuration.