SSR vs CSR mental model in Angular - Practice Questions

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding Server-Side Rendering (SSR) vs Client-Side Rendering (CSR)

Which statement best describes the main difference between SSR and CSR in Angular applications?

A SSR renders the initial HTML on the server before sending it to the browser, while CSR renders the HTML entirely in the browser after loading JavaScript.

B CSR renders the initial HTML on the server, and SSR renders HTML only after user interaction in the browser.

C SSR requires no JavaScript on the client, while CSR requires JavaScript only on the server.

D CSR sends fully rendered HTML from the server, and SSR sends only JSON data to the client.

💡 Hint

Think about where the first HTML content is created: server or browser.

SSR means the server creates the HTML before sending it to the browser, so users see content faster. CSR means the browser builds the HTML after downloading JavaScript.

❓ component_behavior

intermediate

Behavior of Angular Components in SSR vs CSR

In an Angular app using SSR, what happens to component lifecycle hooks like ngOnInit during server rendering?

A ngOnInit does not run during SSR; it only runs in the browser after hydration.

B ngOnInit runs twice: once on the server and once again on the client after hydration.

C ngOnInit runs on the server during SSR, so data can be fetched before sending HTML to the client.

D ngOnInit is replaced by a special SSR lifecycle hook that runs only on the server.

💡 Hint

Consider when Angular runs component code during server rendering.

During SSR, Angular runs component lifecycle hooks like ngOnInit on the server to prepare data before sending HTML. This helps show ready content immediately.

❓ state_output

advanced

State Transfer Between SSR and CSR in Angular

Consider an Angular app using SSR with state transfer. After server rendering, what happens to the application state when the client bootstraps?

A The client re-fetches all data ignoring the server state, causing duplicate requests.

B The client merges server state with local storage data, which can cause conflicts.

C The client clears all server state and starts fresh with empty data.

D The client uses the transferred state from the server to avoid re-fetching data, speeding up hydration.

💡 Hint

Think about how SSR can improve client startup performance.

Angular's state transfer mechanism passes data fetched during SSR to the client, so the client can reuse it and avoid extra network calls.

📝 Syntax

advanced

Identifying SSR-Compatible Angular Code

Which Angular code snippet is NOT compatible with SSR and will cause errors during server rendering?

Angular

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

@Component({
  selector: 'app-example',
  template: `<p>{{message}}</p>`
})
export class ExampleComponent implements OnInit {
  message = '';

  ngOnInit() {
    this.message = window.navigator.userAgent;
  }
}

A The code uses window.navigator in ngOnInit, which is undefined on the server and causes errors.

B The code uses a template string with interpolation, which is fully supported in SSR.

C The component uses OnInit lifecycle hook, which runs on the server during SSR.

D The component defines a class property and updates it in ngOnInit, which is valid in SSR.

💡 Hint

Remember that some browser APIs do not exist on the server.

Accessing window or browser-only objects during SSR causes errors because the server environment lacks these APIs.

🔧 Debug

expert

Debugging Hydration Mismatch in Angular SSR

An Angular SSR app shows a hydration mismatch warning in the browser console after loading. Which cause is most likely responsible?

A The server failed to send any HTML, so the client renders everything from scratch.

B The server rendered HTML and client app have different initial states causing DOM differences during hydration.

C The client app is missing JavaScript files, so hydration cannot run.

D The server rendered HTML uses deprecated Angular syntax not supported by the client.

💡 Hint

Hydration mismatch means the browser sees different HTML than expected from the client app.

Hydration mismatch happens when the HTML generated on the server does not match what the client app expects, often due to differing initial data or state.