SSR vs CSR mental model in Angular - Hands-On Comparison

Understanding SSR vs CSR Mental Model in Angular

📖 Scenario: You are building a simple Angular app that shows a welcome message. You want to understand how Server-Side Rendering (SSR) and Client-Side Rendering (CSR) work differently in Angular.

🎯 Goal: Create a basic Angular component that displays a welcome message. Then add a configuration variable to switch between SSR and CSR modes mentally. Finally, implement logic that simulates rendering behavior based on the mode.

📋 What You'll Learn

Create an Angular standalone component named WelcomeComponent with a template showing 'Welcome to Angular!'

Add a boolean variable isServerSide to represent SSR mode

Use an *ngIf directive to conditionally show a message based on isServerSide

Add a final line to export the component properly

💡 Why This Matters

🌍 Real World

Understanding SSR vs CSR helps developers build faster and more SEO-friendly Angular apps by choosing where rendering happens.

💼 Career

Many companies use Angular Universal for SSR to improve performance and SEO. Knowing this mental model is key for frontend and full-stack developers.

1

Create the Angular component with a welcome message

Create a standalone Angular component named WelcomeComponent with a template that displays the text Welcome to Angular! inside a <h1> tag.

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-welcome',
  standalone: true,
  template: `Welcome to Angular!`
})
export class WelcomeComponent {
  // Your code here
}

Hint

Use @Component decorator with standalone: true and a simple template string.

2

Add a boolean variable to represent SSR mode

Inside the WelcomeComponent class, add a boolean variable named isServerSide and set it to true to represent Server-Side Rendering mode.

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-welcome',
  standalone: true,
  template: `Welcome to Angular!`
})
export class WelcomeComponent {
  // Add isServerSide variable here
}

Hint

Declare isServerSide as a class property and assign true.

3

Use *ngIf to show a message based on SSR or CSR

Modify the component's template to show Rendering on Server inside a <p> tag if isServerSide is true. Otherwise, show Rendering on Client. Use Angular's *ngIf directive with isServerSide.

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-welcome',
  standalone: true,
  template: `
    Welcome to Angular!
    
  `
})
export class WelcomeComponent {
  isServerSide = true;
}

Hint

Use two <p> tags with *ngIf to show messages conditionally.

4

Export the component properly

Ensure the WelcomeComponent class is exported so it can be used in other parts of the Angular app. Confirm the export keyword is present before the class declaration.

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-welcome',
  standalone: true,
  template: `
    Welcome to Angular!
    Rendering on Server
    Rendering on Client
  `
})
// Ensure the component is exported
// Your code here

Hint

Make sure the class starts with export keyword.

Practice

1. What is the main difference between Server-Side Rendering (SSR) and Client-Side Rendering (CSR) in Angular?

easy

A. SSR builds the page on the server and sends full HTML to the browser, while CSR builds the page in the browser using JavaScript.

B. SSR uses JavaScript in the browser to build pages, while CSR builds pages on the server.

C. SSR and CSR both build pages only on the client side.

D. SSR sends only JavaScript files to the browser, CSR sends full HTML.

Solution

1. Step 1: Understand SSR behavior

   SSR builds the full HTML page on the server and sends it to the browser ready to display.

2. Step 2: Understand CSR behavior

   CSR sends minimal HTML and JavaScript to the browser, which then builds the page dynamically.

3. Final Answer:

   SSR builds the page on the server and sends full HTML to the browser, while CSR builds the page in the browser using JavaScript. -> Option A

4. Quick Check:

   SSR = server builds HTML, CSR = browser builds HTML [OK]

Hint: SSR sends full HTML, CSR builds page in browser [OK]

Common Mistakes:

• Confusing which side builds the page
• Thinking SSR uses browser JavaScript first
• Believing CSR sends full HTML from server

2. Which Angular feature is primarily used to enable Server-Side Rendering (SSR)?

easy

A. Angular Universal

B. Angular CLI

C. Angular Material

D. Angular Forms

Solution

1. Step 1: Identify Angular SSR tool

   Angular Universal is the official Angular tool to enable SSR by rendering pages on the server.

2. Step 2: Recognize other options

   Angular CLI helps with project setup, Angular Material is UI components, Angular Forms handles forms, none enable SSR.

3. Final Answer:

   Angular Universal -> Option A

4. Quick Check:

   SSR tool = Angular Universal [OK]

Hint: Angular Universal enables SSR in Angular [OK]

Common Mistakes:

• Choosing Angular CLI as SSR tool
• Confusing Angular Material with SSR
• Thinking Angular Forms enables SSR

3. Consider an Angular app using SSR. What will the browser receive on the first page load?

medium

A. A blank page and JavaScript files to build content

B. Fully rendered HTML content from the server

C. Only CSS files, no HTML or JavaScript

D. JavaScript code that builds the page after user interaction

Solution

1. Step 1: Recall SSR behavior on first load

   SSR sends fully rendered HTML from the server so the browser can display content immediately.

2. Step 2: Compare other options

   Options A and D describe CSR behavior; Only CSS files, no HTML or JavaScript is incorrect as CSS alone cannot render content.

3. Final Answer:

   Fully rendered HTML content from the server -> Option B

4. Quick Check:

   SSR first load = full HTML sent [OK]

Hint: SSR sends full HTML on first load, not blank page [OK]

Common Mistakes:

• Thinking SSR sends blank page first
• Confusing CSS files with page content
• Believing JavaScript builds page immediately in SSR

4. You notice your Angular app using SSR is not showing updated data after navigation. What is a likely cause?

medium

A. Angular Universal is not installed

B. The server is sending blank HTML pages

C. The browser does not support JavaScript

D. The app is not hydrating the server-rendered HTML properly on the client

Solution

1. Step 1: Understand hydration in SSR

   Hydration is the process where client JavaScript takes over server-rendered HTML to make it interactive and update data.

2. Step 2: Identify cause of stale data

   If hydration fails, the page looks static and does not update after navigation, causing stale data display.

3. Final Answer:

   The app is not hydrating the server-rendered HTML properly on the client -> Option D

4. Quick Check:

   Hydration failure causes stale data in SSR [OK]

Hint: Hydration failure causes stale SSR pages [OK]

Common Mistakes:

• Assuming server sends blank pages
• Blaming browser JavaScript support without checking hydration
• Thinking Angular Universal missing causes this specific issue

5. You want your Angular app to load fast for SEO but also have rich interactivity after load. Which approach best fits this need?

hard

A. Use static HTML files without Angular

B. Use only Client-Side Rendering (CSR) for all pages

C. Use Server-Side Rendering (SSR) for initial load and hydrate with CSR for interactivity

D. Load pages with SSR but disable JavaScript on client

Solution

1. Step 1: Identify SEO and fast load needs

   SSR provides fast initial load and full HTML for SEO benefits.

2. Step 2: Add interactivity after load

   Hydrating SSR pages with CSR JavaScript enables rich interactivity after the fast initial load.

3. Step 3: Evaluate other options

   CSR alone delays first meaningful paint; static HTML lacks interactivity; disabling JavaScript breaks interactivity.

4. Final Answer:

   Use Server-Side Rendering (SSR) for initial load and hydrate with CSR for interactivity -> Option C

5. Quick Check:

   SSR + hydration = fast SEO + interactivity [OK]

Hint: SSR first, then hydrate with CSR for best SEO and interactivity [OK]

Common Mistakes:

• Choosing only CSR and ignoring SEO
• Using static HTML losing interactivity
• Disabling JavaScript breaks app functionality