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
}

Need a 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
}

Need a 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;
}

Need a 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

Need a hint?

Make sure the class starts with export keyword.