SSR vs CSR mental model in Vue - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a Vue component that renders content on the client side only.

Vue

<template>
  <div>{{ [1] }}</div>
</template>

<script setup>
const message = 'Hello from client!'
</script>

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

Adocument

Bwindow

Cmessage

Dprops

Attempts:

3 left

💡 Hint

Common Mistakes

Using window or document directly in the template causes errors.

Trying to display props without defining them.

The variable message holds the text to display. Using {{ message }} in the template shows it on the client side.

2fill in blank

medium

Complete the code to fetch data during server-side rendering in a Vue component.

Vue

<script setup>
import { onServerPrefetch } from 'vue'

let data = null

onServerPrefetch(async () => {
  data = await fetch('[1]').then(res => res.json())
})
</script>

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

A'window.location'

B'/client/data'

C'document.title'

D'/api/data'

Attempts:

3 left

💡 Hint

Common Mistakes

Using client-only URLs or browser objects in server code.

Not awaiting the fetch call.

During SSR, fetching from an API endpoint like /api/data is common to get data before rendering.

3fill in blank

hard

Fix the error in this Vue component that tries to access window during SSR.

Vue

<script setup>
const width = [1] ? window.innerWidth : 0
</script>

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

Atypeof window !== 'undefined'

Bwindow !== null

Cwindow != null

Dwindow !== undefined

Attempts:

3 left

💡 Hint

Common Mistakes

Checking window directly without typeof causes ReferenceError.

Using loose equality checks that don't prevent errors.

Checking typeof window !== 'undefined' ensures the code runs only in the browser, avoiding errors during SSR.

4fill in blank

hard

Fill both blanks to create a reactive signal that updates only on the client side.

Vue

<script setup>
import { ref, onMounted } from 'vue'

const width = ref(0)
onMounted(() => {
  width.value = [1]
  window.addEventListener('resize', () => {
    width.value = [2]
  })
})
</script>

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

Awindow.innerWidth

Bdocument.body.clientWidth

Cwindow.outerWidth

Dscreen.width

Attempts:

3 left

💡 Hint

Common Mistakes

Using document.body.clientWidth may not reflect viewport size accurately.

Using screen.width gives the full screen size, not the viewport.

Using window.innerWidth gets the viewport width on the client side, both initially and on resize.

5fill in blank

hard

Fill all three blanks to create a Vue component that fetches data on the client and displays it.

Vue

<template>
  <div>{{ [1] }}</div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const data = ref(null)

onMounted(async () => {
  data.value = await fetch([2]).then(res => res.json())
})

const apiUrl = [3]
</script>

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

Adata.value

B'/api/data'

Ddata

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to display data instead of data.value in the template.

Using different URLs for fetch and apiUrl.

The template shows data.value. The fetch uses '/api/data' as the URL. The apiUrl constant holds the same URL string.

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