SSR vs CSR mental model in Angular - Visual Side-by-Side Comparison

Concept Flow - SSR vs CSR mental model

User requests page

↓

Server builds HTML

↓

Send HTML to client

↓

Browser displays page

↓

User interacts

↓

Server handles requests

Shows how a page request flows differently in SSR and CSR: SSR builds HTML on server, CSR builds DOM in browser.

Execution Sample

Angular

app.get('/', (req, res) => {
  const html = renderAppToString();
  res.send(html);
});

// vs client-side
bootstrapApplication(AppComponent);

Shows server rendering HTML string sent to client vs client bootstrapping Angular app in browser.

Execution Table

Step	Action	SSR Behavior	CSR Behavior	Result
1	User requests page	Server receives request	Browser sends request	Request initiated
2	Render page	Server runs Angular, creates HTML string	Browser loads JS bundle	Page content prepared
3	Send response	Server sends full HTML to browser	Server sends minimal HTML + JS	Browser receives response
4	Display page	Browser renders received HTML immediately	Browser runs JS, builds DOM dynamically	Page visible to user
5	User interaction	Browser sends requests to server for data	Browser handles interactions and updates UI	UI responds to user
6	Further updates	Server re-renders pages on requests	Client updates UI without full reload	Smooth user experience
7	Exit	Request fully handled	App fully bootstrapped	Page ready and interactive

💡 Process ends when page is fully rendered and interactive in both SSR and CSR.

Variable Tracker

Variable	Start	After Step 2	After Step 4	Final
HTML content	empty	full HTML string (SSR) / minimal HTML (CSR)	rendered HTML visible (SSR) / DOM built (CSR)	page displayed
JS bundle	not loaded	not loaded (SSR) / loaded (CSR)	not executed (SSR) / executed (CSR)	app interactive (CSR)
User interaction	none	none	possible	handled by server (SSR) or client (CSR)

Key Moments - 3 Insights

Why does SSR show content faster initially than CSR?

Because SSR sends fully rendered HTML from the server (see execution_table step 4), so the browser can display content immediately without waiting for JavaScript to run.

How does CSR handle user interactions differently from SSR?

CSR runs JavaScript in the browser to update the UI instantly without contacting the server for every change (execution_table step 5), while SSR relies on server requests to update pages.

What happens if JavaScript is disabled in the browser for CSR?

CSR will not render the page content because it depends on JavaScript to build the DOM (execution_table step 4), so the user may see a blank page.

Visual Quiz - 3 Questions

Look at the execution table, at which step does the browser first display the full page content in SSR?

A Step 2

B Step 5

C Step 4

D Step 3

💡 Hint

Check the 'Result' column for SSR behavior at each step.

According to the variable tracker, what is the state of the JS bundle after Step 2 in SSR?

A Loaded and executed

B Not loaded

C Partially loaded

D Loaded but not executed

💡 Hint

Look at the 'JS bundle' row in variable_tracker after Step 2.

If the server sends only minimal HTML and no JS, what will happen in CSR according to the execution table?

A Page remains blank

B Page displays immediately

C Server renders full page

D User interaction handled by client

💡 Hint

Refer to execution_table step 4 CSR behavior about JS running to build DOM.

Concept Snapshot

SSR (Server Side Rendering) builds full HTML on the server and sends it to the browser.
CSR (Client Side Rendering) sends minimal HTML and runs JavaScript in the browser to build the page.
SSR shows content faster initially; CSR enables richer interactivity without full reloads.
SSR depends on server for updates; CSR handles UI updates in the browser.
Both approaches have trade-offs in speed, interactivity, and SEO.

Full Transcript

This visual execution compares Server Side Rendering (SSR) and Client Side Rendering (CSR) in Angular. When a user requests a page, SSR runs Angular on the server to create a full HTML string and sends it to the browser, which displays the page immediately. CSR sends minimal HTML and a JavaScript bundle to the browser, which then runs the JS to build the page dynamically. SSR shows content faster initially because the HTML is ready, while CSR requires JS execution before showing content. User interactions in SSR often require server requests to update the page, whereas CSR handles interactions directly in the browser for smoother updates. The variable tracker shows how HTML content and JS bundle states differ between SSR and CSR during the process. Key moments clarify why SSR is faster initially, how CSR manages interactions, and the importance of JavaScript for CSR. The quizzes test understanding of when content appears, JS loading states, and consequences of missing JS in CSR.

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