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

Concept Flow - SSR vs CSR mental model

User requests page

↓

Browser shows full page

↓

User interacts

↓

Server can send updates

This flow shows how Server-Side Rendering (SSR) sends a ready HTML page from the server, while Client-Side Rendering (CSR) sends JavaScript to the browser which builds the page there.

Execution Sample

Vue

/* SSR: Server sends HTML */
fetch('/page')
  .then(response => response.text())
  .then(html => display(html))

/* CSR: Browser loads JS, then renders */
loadScript('app.js')
  .then(() => renderPage())

This code shows SSR fetching HTML directly, while CSR loads JavaScript first and then renders the page.

Execution Table

Step	Action	Environment	Result	User Sees
1	User requests page	Browser	Request sent to server	Blank or loading screen
2	Server renders HTML	Server	Full HTML page generated	Not visible yet
3	Server sends HTML	Server -> Browser	HTML arrives in browser	Page content appears quickly
4	Browser displays HTML	Browser	HTML parsed and shown	Full page visible immediately
5	Browser loads JS bundle	Browser	JavaScript downloaded	Page interactive after load
6	User interacts	Browser	Events handled by JS	Page responds instantly
7	CSR alternative: Browser loads JS first	Browser	JavaScript downloaded	Loading screen
8	CSR renders page	Browser	DOM created dynamically	Page visible after JS runs
9	User interacts	Browser	JS handles events	Page responds
10	End	-	-	Page fully interactive

💡 Execution ends when page is fully interactive and user can interact with content.

Variable Tracker

Variable	Start	After Step 3	After Step 5	After Step 8	Final
HTML content	empty	full HTML from server	full HTML displayed	empty (CSR)	full HTML displayed (SSR)
JS bundle	not loaded	not loaded	loaded	loaded	loaded
Page visible	no	yes (SSR)	yes	yes (CSR)	yes (CSR after render)
User interaction ready	no	no	yes	yes	yes

Key Moments - 3 Insights

Why does SSR show the page content faster than CSR?

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

Why does CSR show a loading screen before the page appears?

CSR must first download and run JavaScript to build the page (execution_table steps 7 and 8), so the user sees a loading state until this process finishes.

Can the user interact with the page immediately after SSR HTML is displayed?

Not always; the page becomes interactive only after JavaScript loads and runs (execution_table step 5), so initial HTML display is fast but interactivity depends on JS.

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 4

B Step 3

C Step 7

D Step 8

💡 Hint

Check the 'User Sees' column for when the full page becomes visible in SSR.

According to the variable tracker, when does the JS bundle become loaded in SSR?

A After Step 3

B After Step 5

C After Step 8

D At Start

💡 Hint

Look at the 'JS bundle' row and see when it changes from 'not loaded' to 'loaded'.

If the server delays sending HTML, which step in the execution table will be affected first?

A Step 2

B Step 5

C Step 3

D Step 7

💡 Hint

Consider when the HTML arrives in the browser in SSR.

Concept Snapshot

SSR (Server-Side Rendering): Server builds full HTML page and sends it to browser.
Page appears quickly but needs JS for interactivity.
CSR (Client-Side Rendering): Browser loads JS first, then builds page.
Page shows loading until JS runs.
SSR is faster for initial display; CSR offers dynamic client control.

Full Transcript

This visual execution compares Server-Side Rendering (SSR) and Client-Side Rendering (CSR) in Vue. SSR means the server creates the full HTML page and sends it to the browser, so the user sees the page content quickly. The browser then loads JavaScript to make the page interactive. CSR means the browser first downloads JavaScript, then runs it to build the page dynamically, so the user sees a loading screen before the page appears. The execution table shows each step from user request to page interactivity, tracking actions on server and browser. The variable tracker follows key states like HTML content, JS bundle loading, and page visibility. Key moments clarify why SSR shows content faster and why CSR needs loading time. The quiz tests understanding of when the page appears and when JS loads. This helps beginners visualize how SSR and CSR differ in timing and user experience.

Practice

1. What does SSR (Server-Side Rendering) mean in Vue applications?

easy

A. The server builds the full HTML page before sending it to the browser.

B. The browser builds the page after loading JavaScript.

C. The page is built only when the user clicks a button.

D. The server sends only data, and the browser builds the page.

Solution

1. Step 1: Understand SSR concept

   SSR means the server prepares the full HTML content before sending it to the browser.

2. Step 2: Compare with other options

   The options describing browser building the page after loading JavaScript and server sending only data describe CSR behavior, while the button-click option is unrelated to SSR.

3. Final Answer:

   The server builds the full HTML page before sending it to the browser. -> Option A

4. Quick Check:

   SSR = Server builds page first [OK]

Hint: SSR means server sends ready HTML, not just data [OK]

Common Mistakes:

• Confusing SSR with CSR
• Thinking SSR means browser builds page
• Assuming SSR only sends data, not HTML

2. Which Vue code snippet correctly represents a CSR approach?

easy

A. fetch('/api/data').then(res => res.json())

B. export default { ssr: true, setup() { return {} } }

C. const app = Vue.createSSRApp({ template: 'Hello' })

D. const app = Vue.createApp({ data() { return { count: 0 } } }).mount('#app')

Solution

1. Step 1: Identify CSR code pattern

   CSR uses Vue.createApp() to mount app in browser after loading.

2. Step 2: Check other options

   export default { ssr: true, setup() { return {} } } mentions SSR flag, C uses SSR app creation, A is just data fetching.

3. Final Answer:

   const app = Vue.createApp({ data() { return { count: 0 } } }).mount('#app') -> Option D

4. Quick Check:

   CSR uses createApp and mounts in browser [OK]

Hint: CSR uses createApp and mounts in browser [OK]

Common Mistakes:

• Confusing createApp with createSSRApp
• Thinking SSR flag means CSR
• Assuming fetch alone is CSR

3. Given a Vue app using SSR, what will the user see immediately after the server sends the page?

medium

A. The fully rendered HTML page visible instantly.

B. A blank page until JavaScript loads and runs.

C. Only a loading spinner with no content.

D. An error message about missing components.

Solution

1. Step 1: Understand SSR output

   SSR sends fully rendered HTML, so the user sees content immediately.

2. Step 2: Contrast with CSR behavior

   CSR shows blank or spinner until JS runs; SSR avoids this delay.

3. Final Answer:

   The fully rendered HTML page visible instantly. -> Option A

4. Quick Check:

   SSR = instant HTML visible [OK]

Hint: SSR shows full page immediately, no blank screen [OK]

Common Mistakes:

• Thinking SSR waits for JavaScript to load
• Confusing loading spinner with SSR
• Assuming SSR causes errors on load

4. You have a Vue SSR app, but the page stays blank after loading. What is a likely cause?

medium

A. The client-side JavaScript failed to hydrate the server HTML.

B. The server did not send any HTML content.

C. The browser does not support JavaScript.

D. The Vue app was created with createApp instead of createSSRApp.

Solution

1. Step 1: Understand SSR delivery

   In SSR, the server must send fully rendered HTML; a blank page indicates the server rendered no content or sent empty HTML.

2. Step 2: Rule out client-side issues

   Hydration failure leaves static HTML visible; no JS support shows static HTML; using createApp may cause flicker but content appears.

3. Final Answer:

   The server did not send any HTML content. -> Option B

4. Quick Check:

   Blank SSR page = no HTML from server [OK]

Hint: Blank page in SSR means server sent no HTML content [OK]

Common Mistakes:

• Thinking hydration failure causes blank (leaves static HTML)
• Blaming browser JS support (shows static without JS)
• Assuming createApp causes blank (re-renders on client)

5. You want fast initial load and good SEO for a Vue app with dynamic user data. Which approach fits best?

hard

A. Use SSR but disable hydration to speed up loading.

B. Use CSR only, loading data after page loads in browser.

C. Use SSR to render the page on the server, then hydrate on client.

D. Use CSR with server sending only JSON data.

Solution

1. Step 1: Analyze requirements

   Fast initial load and SEO need server-rendered HTML visible to search engines.

2. Step 2: Match approach to needs

   SSR renders HTML on server, improving SEO and load speed; hydration enables interactivity.

3. Step 3: Evaluate other options

   CSR delays content rendering, SSR without hydration loses interactivity, CSR with JSON only delays content.

4. Final Answer:

   Use SSR to render the page on the server, then hydrate on client. -> Option C

5. Quick Check:

   SSR + hydration = fast load + SEO + interactivity [OK]

Hint: SSR with hydration balances speed, SEO, and interactivity [OK]

Common Mistakes:

• Choosing CSR only for SEO needs
• Disabling hydration losing interactivity
• Assuming JSON data alone improves SEO