SSR vs CSR mental model in Angular - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a basic Angular component that runs on the client side.

Angular

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

@Component({
  selector: 'app-root',
  template: `<h1>Hello from [1]!</h1>`
})
export class AppComponent {}

Drag options to blanks, or click blank then click option'

Anode

Bserver

Cclient

Dbrowser

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing 'server' because of confusion with SSR.

The component runs in the client browser, so 'client' fits best here.

2fill in blank

medium

Complete the code to import the Angular Universal module for server-side rendering.

Angular

import { [1] } from '@angular/platform-server';

Drag options to blanks, or click blank then click option'

AServerModule

BExpressEngineModule

CUniversalModule

DBrowserModule

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing BrowserModule which is for client-side only.

ServerModule is the Angular module used for server-side rendering with Angular Universal.

3fill in blank

hard

Fix the error in this Angular server app bootstrap code by completing the blank.

Angular

import { enableProdMode } from '@angular/core';
import { platformServer } from '@angular/platform-server';
import { AppServerModule } from './app/app.server.module';

if (process.env.NODE_ENV === 'production') {
  enableProdMode();
}

platformServer().bootstrapModule([1])
  .catch(err => console.error(err));

Drag options to blanks, or click blank then click option'

AAppModule

BAppServerModule

CServerModule

DBrowserModule

Attempts:

3 left

💡 Hint

Common Mistakes

Using AppModule which is for client-side only.

For server-side rendering, bootstrap the AppServerModule, not the client AppModule.

4fill in blank

hard

Fill both blanks to complete the Angular Universal express server setup for SSR.

Angular

import * as express from 'express';
import { ngExpressEngine } from '@nguniversal/express-engine';
import { AppServerModule } from './src/main.server';

const app = express();

app.engine('html', [1]({
  bootstrap: [2]
}));

Drag options to blanks, or click blank then click option'

AngExpressEngine

BexpressEngine

CAppModule

DAppServerModule

Attempts:

3 left

💡 Hint

Common Mistakes

Using expressEngine which does not exist.

Using AppModule instead of AppServerModule.

ngExpressEngine is the engine function, and AppServerModule is the bootstrap module for SSR.

5fill in blank

hard

Fill all three blanks to complete the Angular component that detects if it runs on server or client.

Angular

import { Component, Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser, isPlatformServer } from '@angular/common';

@Component({
  selector: 'app-root',
  template: `<p>{{message}}</p>`
})
export class AppComponent {
  message = '';
  constructor(@Inject(PLATFORM_ID) private platformId: Object) {
    if ([1](this.platformId)) {
      this.message = 'Running on [2]';
    } else if ([3](this.platformId)) {
      this.message = 'Running on server';
    }
  }
}

Drag options to blanks, or click blank then click option'

AisPlatformBrowser

BisPlatformServer

CisBrowser

Dbrowser

Attempts:

3 left

💡 Hint

Common Mistakes

Using non-existent functions like isBrowser or isServer.

Use isPlatformBrowser to check client, isPlatformServer to check server, and the message reflects that.