What is Angular SSR (Server-Side Rendering)?

Angular SSR is Angular server-side rendering. It enables server-side rendering of Angular apps instead of client-side or browser-side. Normally, Angular apps are Single Page Applications (SPAs), meaning all the rendering happens on the client (browser) using JavaScript. But with SSR, the server pre-renders HTML content and sends a fully rendered page to the browser.

This is made possible in Angular using a platform called Angular Universal.

How Angular SSR Works

Client-Side Rendering (CSR):

• User visits a page → Browser downloads JS bundles → Angular app bootstraps → Content renders.
• Bad for SEO and slower Time-To-Content (TTC).

Server-Side Rendering (SSR):

• User visits a page → Server runs Angular app → Pre-renders HTML → Sends to browser.
• Faster initial load and better SEO.

Why Use SSR for Angular?

Example: Angular SSR Setup

1. Install Angular Universal

ng add @nguniversal/express-engine

This will:

• Add server-side rendering support.
• Generate a server.ts file and a new app.server.module.ts.
• Use Express server to serve your app.

2. Project Structure After SSR

src/
app/
app.component.ts
app.module.ts
app.server.module.ts <-- For server-only features
server.ts <-- Express server entry

3. server.ts (Simplified)

import 'zone.js/node';
import { ngExpressEngine } from '@nguniversal/express-engine';
import * as express from 'express';
import { join } from 'path';
import { AppServerModule } from './src/main.server';
const app = express();
app.engine('html', ngExpressEngine({ bootstrap: AppServerModule,
}));
app.set('view engine', 'html');
app.set('views', join(__dirname, 'browser'));
app.get('*.*', express.static(join(__dirname, 'browser')));
app.get('*', (req, res) => { res.render('index', { req });
});
app.listen(4000, () => { console.log(`Angular SSR app is running on http://localhost:4000`);
});

4.  Run the SSR Build

npm run build:ssr # Builds browser and server bundle
npm run serve:ssr # Starts Express server

SSR Lifecycle in Angular Universal

1. Request comes in
2. Express runs AppServerModule
3. Angular renders the component tree
4. Renders to HTML
5. Sends HTML to browser
6. Browser downloads JS and bootstraps Angular (hydration)

SSR vs Pre-rendering

Use Cases for Angular SSR

• SEO-sensitive pages (landing pages, product pages)
• Social media previews (meta tags rendered server-side)
• Content-heavy or data-driven pages (faster FCP)
• Apps targeting regions with slow internet

Tips & Best Practices

• SSR apps require Node.js backend (e.g., Express)
• Watch out for browser-only APIs (window, document)—wrap them in conditionals
• TransferState API helps transfer data between server and client side without re-fetching.

Summary

• Angular SSR enables rendering of Angular apps on the server using Angular Universal.
• Great for SEO, performance, and user experience.
• It sets up an Express server that renders Angular on-the-fly.