Senior LevelVue JS
How do you debug and resolve complex SSR hydration mismatches caused by browser extensions or timestamps?
❓ Interview Prompt: Explain Vue SSR hydration mismatch errors, server HTML vs client VDOM DOM tree differences, <ClientOnly>, and onMounted timing.
An SSR Hydration Mismatch occurs when the server-rendered HTML structure does not match the Virtual DOM structure generated by the client during initial browser hydration.
Common Causes:
1
Date/Timestamp Mismatches: Rendering 'new Date()' server-side vs client-side.
2
Browser-Only APIs: Accessing 'window.innerWidth' or 'localStorage' during setup.
3
Browser Extensions: Password managers injecting custom '<input>' tags into DOM.
Resolutions:
•
Wrap client-only UI in '<ClientOnly>' tags.
•
Defer browser-specific DOM measurements or dynamic timestamps to the 'onMounted()' lifecycle hook!
Code Implementation Example
html
<script setup>
import { ref, onMounted } from 'vue';
const formattedTime = ref('');
// Defer browser date formatting until client onMounted to prevent SSR mismatch!
onMounted(() => {
formattedTime.value = new Date().toLocaleTimeString();
});
</script>
<template>
<div>
<!-- Wrap client-only dynamic components in <ClientOnly> -->
<ClientOnly>
<p>Rendered on client: {{ formattedTime }}</p>
</ClientOnly>
</div>
</template>💡Resolving SSR hydration mismatch errors using ClientOnly and onMounted timing.
🎯 Interview Key Takeaway
Use <ClientOnly> wrappers and defer browser-specific APIs to onMounted() to eliminate SSR hydration mismatch errors.
#SSR#Hydration Mismatch#Nuxt 3#Senior
Back to all Vue JS Questions→