Hydration behavior in Vue - Performance & Optimization

Performance: Hydration behavior

HIGH IMPACT

Hydration affects how quickly a server-rendered Vue app becomes interactive on the client side.

Making a server-rendered Vue app interactive on the client

Vue

const app = createSSRApp(App);
app.mount('#app'); // lazy hydrate parts or use partial hydration

Hydrating only needed parts or deferring hydration reduces main thread blocking.

📈 Performance Gainreduces blocking time by 50-80%, improves INP significantly

Making a server-rendered Vue app interactive on the client

Vue

const app = createSSRApp(App);
app.mount('#app'); // full hydration of entire app immediately

Hydrating the entire app at once blocks the main thread and delays interactivity.

📉 Performance Costblocks rendering for 100-300ms depending on app size, increases INP

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Full hydration of entire app	High (all nodes processed)	Multiple reflows during hydration	High paint cost due to updates	[X] Bad
Partial or lazy hydration	Lower (only interactive parts)	Fewer reflows	Lower paint cost	[OK] Good

Rendering Pipeline

Hydration reuses server-rendered HTML and attaches Vue's reactive behavior. It involves parsing HTML, running JavaScript to bind events, and updating the DOM.

→DOM Parsing

→JavaScript Execution

→Layout

→Paint

⚠️ BottleneckJavaScript Execution during hydration blocks main thread and delays interactivity

Core Web Vital Affected

INP

Hydration affects how quickly a server-rendered Vue app becomes interactive on the client side.

Optimization Tips

1Avoid hydrating the entire app at once to prevent main thread blocking.

2Use partial or lazy hydration to improve input responsiveness.

3Monitor hydration scripts in DevTools Performance panel to find bottlenecks.

Performance Quiz - 3 Questions

What is the main performance issue with full hydration of a Vue SSR app?

A It causes layout shifts after hydration

B It blocks the main thread causing delayed interactivity

C It increases the size of server HTML

D It reduces the number of DOM nodes

DevTools: Performance

How to check: Record a performance profile during page load and look for long tasks caused by hydration scripts.

What to look for: Look for long scripting tasks blocking main thread and delayed Time to Interactive (TTI) markers.