Hydration behavior in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a Vue 3 component that uses hydration.

Vue

<template>
  <div>{{ message }}</div>
</template>

<script setup>
import { ref } from 'vue'
const message = ref('Hello, Vue!')

// Enable hydration with [1]
</script>

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

AdefineHydrate()

BdefineExpose()

CdefineProps()

DdefineEmits()

Attempts:

3 left

💡 Hint

Common Mistakes

Using defineHydrate() which does not exist.

Confusing defineExpose() with hydration.

Using defineEmits() which is for events.

In Vue 3, defineProps() is used to define props that can be hydrated from server-rendered HTML.

2fill in blank

medium

Complete the code to prevent hydration mismatch warnings by matching server and client markup.

Vue

<template>
  <button @click="count++">Clicked {{ count }} times</button>
</template>

<script setup>
import { ref } from 'vue'
const count = ref([1])
</script>

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

Anull

B0

Cundefined

DNaN

Attempts:

3 left

💡 Hint

Common Mistakes

Setting count to null causes different server/client markup.

Using undefined leads to hydration warnings.

Starting with NaN breaks rendering.

Initializing count to 0 ensures the server and client render the same initial markup, avoiding hydration mismatches.

3fill in blank

hard

Fix the error in the hydration code by completing the blank.

Vue

<template>
  <div>{{ message }}</div>
</template>

<script setup>
import { ref } from 'vue'
const message = ref('Hello')

if (typeof window !== [1]) {
  message.value = 'Hello from client'
}
</script>

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

A'undefined'

B'object'

C'string'

D'function'

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'object' instead of 'undefined' causes logic errors.

Checking for 'string' or 'function' is incorrect here.

Checking if typeof window !== 'undefined' ensures the code runs only on the client, preventing hydration errors.

4fill in blank

hard

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

Vue

<template>
  <p>{{ clientMessage }}</p>
</template>

<script setup>
import { ref, onMounted } from 'vue'
const clientMessage = ref('Server message')
onMounted(() => {
  clientMessage.value = [1]
  console.log([2])
})
</script>

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

A'Client message loaded'

BclientMessage.value

CclientMessage

D'Server message'

Attempts:

3 left

💡 Hint

Common Mistakes

Logging clientMessage directly logs the ref object, not the value.

Using 'Server message' does not update the message.

Assigning to clientMessage instead of clientMessage.value causes errors.

On client mount, update clientMessage.value to a new string and log its value to confirm the update.

5fill in blank

hard

Fill all three blanks to create a Vue 3 hydration-safe component that fetches data only on the client.

Vue

<template>
  <div>{{ data }}</div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
const data = ref(null)
onMounted(async () => {
  const response = await fetch([1])
  data.value = await response.[2]()
  console.log([3])
})
</script>

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

A'/api/data'

Bjson

Cdata.value

D'/api/info'

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong endpoint string causes fetch errors.

Calling response.text() instead of json() returns wrong data format.

Logging data instead of data.value logs the ref object.

Fetch data from '/api/data', parse JSON, and log the reactive value after hydration on client.

Practice

1. What is the main purpose of hydration in Vue when using server-side rendering?

easy

A. To connect the static HTML from the server with Vue's client-side code for interactivity

B. To generate HTML on the client without any server involvement

C. To replace all server-rendered HTML with new client-rendered HTML

D. To disable JavaScript on the client for faster loading

Solution

1. Step 1: Understand hydration concept

   Hydration links the server-rendered HTML with Vue's client code to make the page interactive without re-rendering everything.

2. Step 2: Compare options

   To connect the static HTML from the server with Vue's client-side code for interactivity correctly describes hydration. Options B, C, and D misunderstand hydration's role.

3. Final Answer:

   To connect the static HTML from the server with Vue's client-side code for interactivity -> Option A

4. Quick Check:

   Hydration = connect server HTML + client code [OK]

Hint: Hydration links server HTML to client Vue code [OK]

Common Mistakes:

• Thinking hydration generates HTML only on client
• Believing hydration replaces server HTML entirely
• Assuming hydration disables JavaScript

2. Which of the following Vue code snippets correctly enables hydration for a server-rendered app?

easy

A. createApp(App).mount('#app')

B. new Vue({ el: '#app' })

C. createSSRApp(App).mount('#app')

D. Vue.hydrate(App, '#app')

Solution

1. Step 1: Identify hydration method in Vue 3 SSR

   Vue 3 uses createSSRApp() to create an app that supports hydration of server-rendered HTML.

2. Step 2: Evaluate options

   createSSRApp(App).mount('#app') uses createSSRApp(). createApp(App).mount('#app') is for client-only apps. new Vue({ el: '#app' }) is Vue 2 syntax. Vue.hydrate(App, '#app') is invalid.

3. Final Answer:

   createSSRApp(App).mount('#app') -> Option C

4. Quick Check:

   SSR hydration uses createSSRApp() [OK]

Hint: Use createSSRApp() for hydration in Vue 3 SSR [OK]

Common Mistakes:

• Using createApp() instead of createSSRApp() for hydration
• Using Vue 2 syntax in Vue 3 projects
• Assuming Vue has a hydrate() method

3. Given this Vue 3 SSR hydration code snippet, what will be the console output?

const app = createSSRApp({
  data() { return { count: 0 } },
  mounted() { console.log('Mounted with count:', this.count) }
})
app.mount('#app')

medium

A. No output because mounted is not called during hydration

B. Mounted with count: 0

C. Error: createSSRApp is not a function

D. Mounted with count: undefined

Solution

1. Step 1: Understand mounted hook during hydration

   During hydration, the mounted hook runs after the client connects to server HTML, so it logs the current data state.

2. Step 2: Check data initialization

   Data count is initialized to 0, so the console logs 'Mounted with count: 0'.

3. Final Answer:

   Mounted with count: 0 -> Option B

4. Quick Check:

   Mounted logs count 0 during hydration [OK]

Hint: Mounted runs after hydration with initialized data [OK]

Common Mistakes:

• Thinking mounted does not run during hydration
• Assuming data is undefined at mount
• Confusing createSSRApp with createApp

4. You notice that after hydration, your Vue app's client-side interactivity is broken and console shows a mismatch warning. What is the most likely cause?

medium

A. The server-rendered HTML does not match the client-side template output

B. You forgot to import Vue in your client entry file

C. You used createApp() instead of createSSRApp() on the server

D. The mounted hook is missing in your component

Solution

1. Step 1: Understand hydration mismatch warning

   Vue warns when server HTML and client render output differ, causing hydration failure.

2. Step 2: Analyze options

   The server-rendered HTML does not match the client-side template output correctly identifies mismatch as cause. You forgot to import Vue in your client entry file causes import errors, not mismatch. You used createApp() instead of createSSRApp() on the server is about server setup, not client mismatch. The mounted hook is missing in your component does not cause hydration mismatch.

3. Final Answer:

   The server-rendered HTML does not match the client-side template output -> Option A

4. Quick Check:

   Mismatch = server HTML ≠ client template [OK]

Hint: Mismatch warning means server and client HTML differ [OK]

Common Mistakes:

• Ignoring mismatch warnings
• Confusing import errors with hydration issues
• Assuming missing mounted hook breaks hydration

5. You have a Vue 3 SSR app that renders a list of items on the server. Some items have a dynamic property that changes on the client only. How should you handle hydration to avoid mismatch errors?

hard

A. Ignore mismatch warnings since they don't affect user experience

B. Render all dynamic properties on the server to keep HTML identical

C. Disable hydration and fully re-render on client with createApp()

D. Use v-if or v-show to conditionally render client-only parts after hydration

Solution

1. Step 1: Identify client-only dynamic content issue

   Dynamic properties that differ between server and client cause hydration mismatches.

2. Step 2: Use conditional rendering for client-only parts

   Using v-if or v-show to render client-only content after hydration avoids mismatch.

3. Step 3: Evaluate other options

   Render all dynamic properties on the server to keep HTML identical is impractical if data is truly client-only. Disable hydration and fully re-render on client with createApp() disables hydration benefits. Ignore mismatch warnings since they don't affect user experience ignores errors.

4. Final Answer:

   Use v-if or v-show to conditionally render client-only parts after hydration -> Option D

5. Quick Check:

   Client-only content = conditional render after hydration [OK]

Hint: Render client-only parts conditionally after hydration [OK]

Common Mistakes:

• Trying to render client-only data on server
• Disabling hydration unnecessarily
• Ignoring mismatch warnings