Angular Server-Side Rendering (SSR): A Comprehensive Guide with Examples and Use Cases

Gunasekar J

4 min read

·

Jan 24, 2026

--

Listen

Share

Press enter or click to view image in full size

Server-side rendering (SSR) is a powerful technique that can significantly enhance the performance, SEO, and user experience of Angular applications. By rendering pages on the server and delivering fully-rendered HTML to the client, SSR ensures that users see content faster, even on low-bandwidth connections or mobile devices. In this article, we’ll explore why SSR is important, how to enable it in Angular, and some practical use cases with examples.

Why Use Server-Side Rendering (SSR)?

1. Improved Performance

SSR delivers fully-rendered HTML to the client, allowing the browser to display content before downloading and executing JavaScript. This reduces the time to First Contentful Paint (FCP) and Largest Contentful Paint (LCP), which are critical metrics for user experience.

2. Better SEO

Search engines can crawl and index server-rendered content more effectively than client-side rendered (CSR) content. This is especially important for applications that rely on organic search traffic.

3. Enhanced Core Web Vitals

SSR improves Core Web Vitals (CWV) metrics, such as FCP, LCP, and Cumulative Layout Shift (CLS), which are key factors in Google’s ranking algorithm.

4. Improved User Experience

Users on slow networks or devices benefit from faster page loads, as the server sends pre-rendered HTML instead of waiting for JavaScript to render the page.

Enabling Server-Side Rendering in Angular

Angular makes it easy to enable SSR using the Angular CLI. Here’s how you can get started:

1. Create a New Project with SSR

To create a new Angular project with SSR enabled, run the following command:

ng new my-app --ssr

2. Add SSR to an Existing Project

If you already have an Angular project, you can add SSR using the Angular CLI:

ng add @angular/ssr

This command updates your project structure and adds the necessary files for SSR, such as:

• server.ts: Configures the Node.js Express server for SSR.
• app.config.server.ts: Server-specific application configuration.
• main.server.ts: Bootstraps the server application.

Configuring Server-Side Rendering

Server Configuration

The server.ts file configures a Node.js Express server and uses Angular’s CommonEngine to render the application. Here’s an example of how it works:

import { CommonEngine } from '@angular/ssr';
import express from 'express';
const app = express();
const commonEngine = new CommonEngine();

app.get('*', (req, res, next) => {
  const { protocol, originalUrl, headers } = req;
  commonEngine
    .render({
      bootstrap: AppServerModule, // Your server module
      documentFilePath: './src/index.html',
      url: `${protocol}://${headers.host}${originalUrl}`,
      publicPath: './dist/browser',
      providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }],
    })
    .then((html) => res.send(html))
    .catch((err) => next(err));
});
app.listen(4000, () => {
  console.log('Server listening on http://localhost:4000');
});

This configuration ensures that all routes are handled by Angular’s SSR engine.

Hydration: Bridging Server and Client

Hydration is the process of reusing server-rendered HTML on the client side. It ensures that the application state is preserved and that the client-side Angular application takes over seamlessly.

Enabling Hydration

Hydration is enabled by default when using SSR. However, you can customize it using the provideClientHydration function:

import { provideClientHydration, withHttpTransferCacheOptions } from '@angular/platform-browser';
bootstrapApplication(AppComponent, {
  providers: [
    provideClientHydration(withHttpTransferCacheOptions({
      includePostRequests: true, // Cache POST requests
    }))
  ]
});

This configuration caches HTTP requests made on the server and reuses them on the client, reducing redundant network calls.

Authoring Server-Compatible Components

When building components for SSR, avoid using browser-specific APIs like window, document, or navigator directly. Instead, use Angular’s lifecycle hooks, such as afterRender and afterNextRender, to ensure code runs only in the browser:

import { Component, afterNextRender } from '@angular/core';
@Component({
  selector: 'app-example',
  template: `<div #content>Hello, World!</div>`,
})
export class ExampleComponent {
  constructor() {
    afterNextRender(() => {
      // Safe to use browser APIs here
      console.log('Component rendered in the browser');
    });
  }
}

Caching Data with HttpClient

Angular’s HttpClient automatically caches outgoing requests on the server and transfers the cached data to the client. This reduces the need for duplicate requests during the initial render:

import { HttpClientModule } from '@angular/common/http';
@NgModule({
  imports: [HttpClientModule],
})
export class AppModule {}

By default, HttpClient caches GET and HEAD requests. You can customize this behavior using withHttpTransferCacheOptions.

Use Cases for Angular SSR

1. E-Commerce Platforms

E-commerce sites benefit from SSR because it improves page load times and SEO, leading to better search rankings and higher conversion rates.

2. Content-Heavy Websites

Blogs, news sites, and documentation portals use SSR to ensure fast content delivery and better search engine visibility.

3. Progressive Web Apps (PWAs)

Combining SSR with Angular’s service worker ensures that PWAs load quickly and provide a seamless offline experience.

4. Dashboards and Analytics

SSR can pre-render data-heavy dashboards, ensuring users see meaningful content immediately.

Conclusion

Angular’s server-side rendering is a game-changer for building high-performance, SEO-friendly web applications. By enabling SSR, you can deliver faster page loads, improve Core Web Vitals, and enhance the user experience. Whether you’re building an e-commerce platform, a content-heavy website, or a PWA, SSR is a powerful tool to add to your Angular toolkit.

Ready to get started? Use the Angular CLI to enable SSR in your project and experience the benefits firsthand!

Further Reading:

• Angular SSR Documentation
• Express.js Documentation
• Core Web Vitals Explained

Happy coding! 🚀