SSR vs CSR mental model in Angular

Introduction

SSR and CSR are two ways to show web pages. SSR builds pages on the server, CSR builds pages in your browser.

You want your page to load fast and show content quickly to users.

You want your page to work well with search engines like Google.

You want to make interactive apps that update without reloading the page.

You want to reduce the load on the user's device by doing work on the server.

You want to improve user experience on slow internet connections.

Syntax

Angular

No specific code syntax applies here, but Angular uses special setups for SSR and CSR.

For SSR: Use Angular Universal to render pages on the server.
For CSR: Use standard Angular app running in the browser.

SSR means Server-Side Rendering: the server sends a full HTML page.

CSR means Client-Side Rendering: the browser builds the page using JavaScript.

Examples

This runs the Angular app in the browser only. The server sends a minimal HTML shell.

Angular

// CSR example: Angular app runs fully in browser
ng serve

This runs Angular Universal to build the page on the server before sending it to the browser.

Angular

// SSR example: Angular Universal renders on server
ng run your-app:server
node dist/your-app/server/main.js

Sample Program

The CSR example shows a simple Angular component that runs in the browser.

The SSR example shows a basic Express server using Angular Universal to render pages on the server.

Angular

// This is a conceptual example showing SSR vs CSR in Angular

// CSR: app.component.ts
import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `<h1>Welcome to CSR App</h1><p>Content loads in browser.</p>`
})
export class AppComponent {}

// SSR: server.ts (simplified)
import 'zone.js/node';
import { ngExpressEngine } from '@nguniversal/express-engine';
import * as express from 'express';
import { AppServerModule } from './src/main.server';

const app = express();
app.engine('html', ngExpressEngine({ bootstrap: AppServerModule }));
app.set('view engine', 'html');
app.set('views', './dist/browser');

app.get('*', (req, res) => {
  res.render('index', { req });
});

app.listen(4000, () => {
  console.log('SSR server running on http://localhost:4000');
});

Important Notes

SSR improves initial load speed and SEO because the server sends ready HTML.

CSR allows more dynamic and interactive apps but may show a blank page until JavaScript loads.

Angular Universal is the official tool for SSR in Angular.

Summary

SSR builds pages on the server and sends full HTML to the browser.

CSR builds pages in the browser using JavaScript after loading.

Use SSR for faster first load and SEO; use CSR for rich interactivity.