Copied to Clipboard
2. Random Values or Non-Deterministic Output
If you generate random numbers, timestamps, or IDs during render, your HTML will differ between SSR and CSR.
❌ Example:
<template>
<p>User ID: {{ Math.random() }}</p>
</template>
✅ Fix:
Use a deterministic ID generated on the server and passed as a prop or from a store/state.
3. Data Fetched Only on Client Side
If you rely on API calls made only in onMounted() and don’t render placeholder data on the server, Vue will try to hydrate with empty HTML and then replace it, causing mismatches.
✅ Fix:
In Nuxt, use useAsyncData() or useFetch() so that data is fetched both server-side and client-side consistently:
const { data } = await useAsyncData('users', () => $fetch('/api/users'));
4. Conditional Rendering with Non-SSR-Safe Logic
Sometimes, UI elements depend on conditions that differ between SSR and client rendering, such as theme detection, cookies, or viewport checks.
❌ Example:
<template>
<div>{{ isDark ? '🌙 Dark mode' : '☀️ Light mode' }}</div>
</template>
<script setup>
const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
</script>
✅ Fix:
Handle it after hydration or through a plugin that syncs theme preference on both sides.
✅ Best Practices
Here are some key strategies to avoid hydration mismatches in Vue and Nuxt:
- 🧠 Avoid using browser-only APIs during SSR — wrap them in
onMounted() or if (process.client) checks.
- 🕐 Use deterministic rendering — don’t generate random or time-based values in templates.
- 🧩 Use
useAsyncData or useFetch in Nuxt to synchronize data between server and client.
- ⚙️ Keep server and client state aligned — share initial data through props or stores.
- 🎨 Be cautious with conditionals — make sure elements rendered on the server also exist on the client (even if hidden).
- 🔍 Test hydration locally — run your app in SSR mode and check the browser console for mismatches early.
📖 Learn more
If you’d like to learn more about Vue, Nuxt, JavaScript, or other modern web technologies, check out VueSchool by clicking this link or the image below:
Vue School Link
It covers essential concepts that help you build and debug real-world Vue or Nuxt applications effectively.
🧪 Advance skills
A certification boosts your skills, builds credibility, and opens doors to new opportunities. Whether you’re advancing your career or switching paths, it’s a smart step toward success.
Check out Certificates.dev by clicking this link or the image below:
Certificates.dev Link
Invest in yourself—get certified in Vue.js, JavaScript, Nuxt, Angular, React, and more!
✅ Summary
A hydration mismatch occurs when your Vue or Nuxt app renders different HTML on the server and the client. While it may look harmless, it can lead to broken interactivity, visual flickers, and inconsistent state.
By following best practices — avoiding browser-only logic on the server, keeping rendering deterministic, and syncing data properly — you can prevent hydration issues and ensure your Vue app works flawlessly across environments.
Take care!
And happy coding as always 🖥️