Hydration behavior in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens during Vue hydration when server and client markup differ?

Consider a Vue 3 app using SSR. The server renders a list of items, but the client has a different list initially. What will Vue do during hydration?

Vue

<template>
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.text }}</li>
  </ul>
</template>

<script setup>
import { ref } from 'vue'
const items = ref([{ id: 1, text: 'A' }, { id: 2, text: 'B' }])
// Assume server rendered items: [{ id: 1, text: 'A' }, { id: 2, text: 'C' }]
</script>

A Vue will keep the server markup as is and ignore the client data, causing the list to show 'C' instead of 'B'.

B Vue will discard the server-rendered DOM and fully re-render the list on the client from scratch.

C Vue will throw a hydration error and stop rendering because the server and client markup differ.

D Vue will patch the DOM to update the text of the second list item from 'C' to 'B' without re-rendering the entire list.

💡 Hint

Think about how Vue tries to reuse server markup and patch only differences.

Vue's hydration process reuses the server-rendered DOM and patches only the differences found in client data. It updates text content or attributes as needed without full re-rendering.

❓ lifecycle

intermediate

When does the mounted() hook run in a hydrated Vue component?

In a Vue 3 SSR app, the server renders the component and the client hydrates it. At what point does the mounted() lifecycle hook run?

A Mounted runs immediately after the server renders the HTML, before hydration starts.

B Mounted runs before hydration begins, during the initial client setup phase.

C Mounted runs after the client finishes hydration and the component is attached to the DOM.

D Mounted does not run at all during hydration to avoid duplicate side effects.

💡 Hint

Consider when the component is fully interactive on the client.

The mounted() hook runs after hydration completes and the component is attached to the DOM on the client. It does not run on the server.

🔧 Debug

advanced

Why does this Vue hydration warning appear in the console?

Given this Vue 3 SSR app, the console shows a hydration warning about mismatched content. What causes this warning?

Vue

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

<script setup>
import { ref } from 'vue'
const message = ref('Hello from client')
// Server rendered message was 'Hello from server'
</script>

A The client data differs from the server markup, causing Vue to detect mismatch during hydration.

B The component is missing a unique key, so Vue cannot match nodes properly.

C The server did not render the component, so hydration fails.

D Vue hydration warnings only appear if the component uses deprecated APIs.

💡 Hint

Check if the server and client render the same text content.

Hydration warnings occur when the client-side data produces different markup than the server-rendered HTML, causing Vue to detect mismatches.

📝 Syntax

advanced

Which Vue hydration code snippet correctly avoids hydration mismatch?

Choose the code snippet that prevents hydration mismatch by ensuring server and client render the same content.

A

<template>
  <div>{{ count }}</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
const count = ref(0)
onMounted(() => { count.value = 1 })
</script>

B

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

C

<template>
  <div v-if="mounted">{{ count }}</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
const count = ref(1)
const mounted = ref(false)
onMounted(() => { mounted.value = true })
</script>

D

<template>
  <div>{{ count }}</div>
</template>
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

💡 Hint

Think about what value the server rendered and what the client starts with.

To avoid hydration mismatch, the initial client state must match the server-rendered content. Setting count to 1 initially matches server output.

❓ state_output

expert

What is the final rendered output after hydration with this Vue 3 SSR component?

Given this Vue 3 SSR component, what will the user see after hydration completes?

Vue

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

<script setup>
import { ref } from 'vue'
const count = ref(5) // server rendered with count=5
function increment() {
  count.value++
}
</script>

A The button shows 'Clicked 5 times' initially, and increments count on each click.

B The button shows 'Clicked 0 times' initially because client state resets, then increments on click.

C The button shows 'Clicked 5 times' but clicking does not update the count due to hydration issues.

D The button shows 'Clicked 0 times' and clicking causes hydration errors.

💡 Hint

Consider how Vue preserves reactive state from server to client during hydration.

Vue hydrates with the server state (count=5). The button shows 'Clicked 5 times' initially and increments correctly on clicks.