Why SSR matters for Angular - See It in Action

Why SSR matters for Angular

📖 Scenario: You are building a simple Angular app that shows a welcome message and a list of products. You want to understand why Server-Side Rendering (SSR) is important for Angular apps, especially for faster loading and better search engine visibility.

🎯 Goal: Create a basic Angular component that displays a welcome message and a list of products. Then add a configuration to simulate SSR by preloading data on the server side before rendering the component.

📋 What You'll Learn

Create a standalone Angular component called WelcomeComponent with a welcome message and a list of products.

Add a configuration variable isServer to simulate server environment detection.

Use Angular's ngIf directive to conditionally render a loading message or the product list based on isServer.

Complete the component template and class to reflect SSR behavior.

💡 Why This Matters

🌍 Real World

Many Angular apps use SSR to improve initial load speed and SEO by rendering pages on the server before sending them to the browser.

💼 Career

Understanding SSR is important for Angular developers working on performance optimization and SEO-friendly web applications.

1

Create the Angular component with product data

Create a standalone Angular component called WelcomeComponent. Inside the component class, create a public property products which is an array of strings with these exact values: 'Laptop', 'Smartphone', 'Tablet'. In the component template, add a heading with the text Welcome to Our Store and an unordered list that displays each product using *ngFor with the variable product.

Angular

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

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

Need a hint?

Define the products array exactly as shown. Use *ngFor="let product of products" in the template to loop over products.

2

Add a configuration variable to detect server environment

Inside the WelcomeComponent class, add a public boolean property called isServer and set it to true to simulate server-side rendering environment detection.

Angular

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

@Component({
  selector: 'app-welcome',
  standalone: true,
  template: `
    Welcome to Our Store
    
      {{ product }}
    
  `
})
export class WelcomeComponent {
  products = ['Laptop', 'Smartphone', 'Tablet'];
  // Add isServer variable here
}

Need a hint?

Just add isServer = true; inside the component class.

3

Use ngIf to conditionally show loading or products

Modify the component template to use *ngIf with the variable isServer. If isServer is false, show a paragraph with the text Loading products.... If isServer is true, show the unordered list of products as before.

Angular

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

@Component({
  selector: 'app-welcome',
  standalone: true,
  template: `
    Welcome to Our Store
    
  `
})
export class WelcomeComponent {
  products = ['Laptop', 'Smartphone', 'Tablet'];
  isServer = true;
}

Need a hint?

Use two *ngIf directives: one for showing loading when isServer is false, and one for showing the product list when isServer is true.

4

Complete the component to simulate SSR behavior

Add a method called toggleServer() inside the WelcomeComponent class that toggles the value of isServer between true and false. Add a button in the template with the text Toggle Server that calls toggleServer() when clicked.

Angular

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

@Component({
  selector: 'app-welcome',
  standalone: true,
  template: `
    Welcome to Our Store
    Loading products...
    
      {{ product }}
    
    
  `
})
export class WelcomeComponent {
  products = ['Laptop', 'Smartphone', 'Tablet'];
  isServer = true;
  // Add toggleServer method here
}

Need a hint?

Create a method toggleServer() that flips isServer. Add a button with (click)="toggleServer()" in the template.