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.