Hydration behavior in Vue - Step-by-Step Execution

Concept Flow - Hydration behavior

Server renders HTML

↓

Client loads page

↓

Vue attaches event listeners

↓

Vue reuses existing DOM

↓

Hydration completes

↓

App is interactive

Hydration is the process where Vue takes server-rendered HTML and makes it interactive by attaching event listeners and reusing the existing DOM.

Execution Sample

Vue

<template>
  <button @click="count++">Count: {{ count }}</button>
</template>
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

A simple Vue component with a button that increments a count when clicked, demonstrating hydration of server-rendered HTML.

Execution Table

Step	Action	Client DOM State	Vue State	Result
1	Server renders static HTML with count=0	<button>Count: 0</button>	N/A	Static HTML sent to client
2	Client loads page and parses HTML	<button>Count: 0</button>	N/A	DOM exists but no Vue yet
3	Vue initializes and attaches to existing DOM	<button>Count: 0</button>	count=0	Vue state matches DOM content
4	Vue attaches event listener to button	<button>Count: 0</button>	count=0	Button is now interactive
5	User clicks button	<button>Count: 0</button>	count=0	Click event triggers count increment
6	Vue updates count to 1 and re-renders	<button>Count: 1</button>	count=1	DOM updates count text
7	User clicks button again	<button>Count: 1</button>	count=1	Click event triggers count increment
8	Vue updates count to 2 and re-renders	<button>Count: 2</button>	count=2	DOM updates count text
9	No more user interaction	<button>Count: 2</button>	count=2	App remains interactive
10	Page unload or navigation	<button>Count: 2</button>	count=2	Hydration session ends

💡 Hydration completes when Vue attaches to existing DOM and app becomes interactive.

Variable Tracker

Variable	Start	After Step 3	After Step 6	After Step 8	Final
count	undefined	0	1	2	2

Key Moments - 3 Insights

Why doesn't Vue recreate the entire DOM during hydration?

Vue reuses the existing server-rendered DOM to avoid unnecessary work and preserve the initial HTML, as shown in execution_table step 3.

What happens if the server HTML and Vue state don't match during hydration?

Vue will warn and may replace parts of the DOM to fix mismatches, but ideally they should match to avoid re-rendering, as implied in step 3 and 6.

When do event listeners get attached in hydration?

Event listeners are attached after Vue initializes on the client and reuses the DOM, as shown in step 4.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'count' after step 6?

A 2

B 0

C 1

D undefined

💡 Hint

Check the 'Vue State' column at step 6 in the execution_table.

At which step does Vue attach event listeners to the button?

A Step 2

B Step 4

C Step 3

D Step 5

💡 Hint

Look for the action describing event listener attachment in the execution_table.

If the server HTML showed 'Count: 5' but Vue state started at 0, what would happen during hydration?

A Vue would warn and update the DOM to match state

B Vue would ignore the mismatch and keep DOM as is

C Vue would crash and not hydrate

D Vue would reset state to 5 automatically

💡 Hint

Refer to the key moment about mismatches between server HTML and Vue state.

Concept Snapshot

Hydration behavior in Vue:
- Server renders static HTML
- Client loads and Vue attaches to existing DOM
- Vue reuses DOM and attaches event listeners
- State matches server HTML to avoid re-render
- After hydration, app is fully interactive
- Mismatches cause warnings and DOM updates

Full Transcript

Hydration in Vue means taking the HTML generated on the server and making it interactive on the client. First, the server sends static HTML with initial data. When the client loads the page, Vue attaches itself to the existing DOM instead of recreating it. Vue then attaches event listeners so the page responds to user actions. The Vue state must match the server HTML to avoid re-rendering. If the user clicks a button, Vue updates the state and changes the DOM accordingly. Hydration ends when Vue fully controls the page and it is interactive.