Deep Dive into Angular 20 Server-Side Rendering (SSR) and Hydration

Angular 20 makes Server-Side Rendering (SSR) and Hydration setup easier than ever. If you’ve worked with previous versions, you’ll appreciate how smooth the new developer experience is. With just a single command, you can get a fully functional SSR + Hydration setup running in no time.
 

1. Hands-On: Enabling SSR and Hydration

1.1 New Project Setup (The Easiest Way)

When you create a new Angular project, just add the --ssr flag:

ng new my-first-angular-20-app --ssr

The Angular CLI handles all the heavy lifting for you!
This command:

• Sets up the necessary server files (like server.ts).

• Configures the build process for both client and server bundles

• Automatically enables Hydration

1.2 Add SSR to an Existing Project

If you already have an Angular project, simply add SSR with :

ng add @angular/ssr

This command:

• Installs all necessary SSR and hydration dependencies.

• Adds required configuration files.

• Updates your Angular setup to be SSR-ready with hydration enabled.
   

2. Reviewing the Generated Files

Once the command runs, you’ll find these key files :

• server.ts — your applicaiton server

• main.server.ts — SSR entry point

• app.config.server.ts  — server-side version of your AppModule

• app.routes.server.ts — Routes file for server

These files work together to handle the full SSR lifecycle — from server rendering to client hydration.
 

3. Enabling Hydration (Manually if Needed)

In Angular 20, hydration is enabled by default when you use --ssr.
However, if you need to enable it manually (for example, in a custom setup), open your app.config.ts file and ensure hydration is turned on :

import { provideClientHydration } from '@angular/platform-browser';

export const appConfig = {
  providers: [
    provideClientHydration()  // Enables client-side hydration
  ]
};

This ensures Angular reuses the pre-rendered DOM instead of replacing it during bootstrap — significantly improving startup performance.

4. Run and Test Locally

To see SSR + Hydration in action, run the development server :

If the command doesn’t exist in your package.json add this script :

"dev:ssr": "ng run ssr-hydration-demo:serve:development"

Then, start the SSR development server :

npm run dev:ssr
# or
ng run your-project-name:serve:development

5. Understanding Render Modes in Angular 20+

Angular 20 (and beyond) introduces a simplified, flexible render model built around Render Modes.
Each mode determines how your app’s HTML is generated and delivered — whether in the browser, on the server, or statically at build time.

You can configure the render mode globally or per route, giving you total control over performance and deployment strategies.

6. The SSR Workflow in Action

Let’s trace how Angular SSR + Hydration work together through a simple example.

Example Component

@Component({
  selector: 'app-product-dashboard',
  template: `
    <h1>{{ productDetails.name }}</h1>
    <button (click)="logClick()">Click Me</button>
  `
})
export class ProductComponent {
  productDetails = { name: 'AI Powered Software' };
  
  logClick() {
    console.log('Button clicked!');
  }
}

Step 1: Server Output (SSR)

• The server processes the request.

• It executes the component and renders the value 'AI Powered Software'.

• The server sends the HTML:
   

<h1>AI Powered Software</h1>
<button>Click Me</button>

Result: The user instantly sees the heading on their screen (fast perceived performance).

Step 2: Client Takeover (Hydration)

• While the user reads the content, Angular’s JavaScript bundle loads.

• The Angular client starts up and performs hydration.

• Angular finds the existing DOM elements (<h1> and <button>) and reuses them — simply attaching the event handler (click)="logClick()".

Result: When the user clicks the button, the event triggers immediately — with no visual flicker or DOM re-creation.

By making SSR and Hydration standard and simple, Angular 20 dramatically improves startup performance and user experience.

7. Example — Setting Render Mode per Route

Angular allows defining render modes per route directly in the route configuration:

import { RenderMode, ServerRoute } from '@angular/ssr';
export const serverRoutes: ServerRoute[] = [
  {
    path: '',
    component: HomeComponent,
    renderMode: RenderMode.Server, // SSR + Hydration
  },
  {
    path: 'dashboard',
    component: DashboardComponent,
    renderMode: RenderMode.Client, // Pure CSR
  },
  {
    path: 'about',
    component: AboutComponent,
    renderMode: RenderMode.Prerender, // Static pre-rendered HTML
  },
  {
    path: '**',
    renderMode: RenderMode.Client
  }
];

💡 This route-based flexibility lets you mix SSR, CSR, and Pre-rendering within a single application — optimizing performance for each page type.

8. Deployment Steps After Enabling SSR

When you generate the build, you’ll find two folders under dist/<project-name>/:

• browser/ → Serves static assets

• server/ → Handles dynamic rendering and hydration bootstrapping

Run the Production SSR Build Locally

First, build your project:

npm run build

Then test it locally:

npm run serve:ssr
# or
node dist/my-fast-app/server/server.mjs

Deployment Notes

Because SSR relies on a Node.js server, you must host your app on a Node-compatible environment.
Static site hosting won’t work with SSR-enabled builds.

Summary

Angular 20 redefines the SSR + Hydration experience by making it seamless, fast, and developer-friendly.
Here’s what makes it stand out:

• One-line setup with --ssr or ng add @angular/ssr

• Automatic hydration for smooth client takeovers

• Flexible render modes (Server, Client, Prerender)

• Route-level control for fine-tuned performance

• Unified build output with browser/server folders

• Production-ready SSR deployable on any Node host
   

With these advancements, Angular apps can now match the world’s best-performing web experiences — delivering instant, interactive, and SEO-friendly results.