153 lines
3.7 KiB
Markdown
153 lines
3.7 KiB
Markdown
---
|
|
title: Handle Teleport SSR Hydration Carefully
|
|
impact: HIGH
|
|
impactDescription: Teleported content causes hydration mismatches in SSR/SSG applications
|
|
type: gotcha
|
|
tags: [vue3, teleport, ssr, nuxt, hydration]
|
|
---
|
|
|
|
# Handle Teleport SSR Hydration Carefully
|
|
|
|
**Impact: HIGH** - Teleports require special handling during SSR. The teleported content is not part of the server-rendered HTML string, causing hydration mismatches that can break the application or cause content to disappear.
|
|
|
|
This is a critical issue for Nuxt, Quasar SSR, and custom Vue SSR setups.
|
|
|
|
## Task Checklist
|
|
|
|
- [ ] Wrap Teleport in `<ClientOnly>` component (Nuxt) for client-only rendering
|
|
- [ ] Use conditional rendering based on mount state for non-Nuxt SSR
|
|
- [ ] Use `data-allow-mismatch` attribute in Vue 3.5+ when intentional
|
|
- [ ] Test SSR applications thoroughly for hydration issues
|
|
|
|
**Problem - SSR Hydration Mismatch:**
|
|
```vue
|
|
<template>
|
|
<!-- Server renders nothing for teleported content -->
|
|
<!-- Client expects teleported content at #modals -->
|
|
<!-- = Hydration mismatch -->
|
|
<Teleport to="#modals">
|
|
<div v-if="showModal" class="modal">
|
|
Modal content
|
|
</div>
|
|
</Teleport>
|
|
</template>
|
|
```
|
|
|
|
Common error messages:
|
|
```
|
|
[Vue warn]: Hydration children mismatch in <div>:
|
|
server rendered element contains fewer child nodes than client vdom.
|
|
```
|
|
|
|
**Solution 1 - Nuxt ClientOnly:**
|
|
```vue
|
|
<template>
|
|
<button @click="showModal = true">Open Modal</button>
|
|
|
|
<!-- Only render on client, avoiding SSR -->
|
|
<ClientOnly>
|
|
<Teleport to="body">
|
|
<div v-if="showModal" class="modal">
|
|
Modal content
|
|
</div>
|
|
</Teleport>
|
|
</ClientOnly>
|
|
</template>
|
|
```
|
|
|
|
**Solution 2 - Manual Client Detection:**
|
|
```vue
|
|
<template>
|
|
<button @click="showModal = true">Open Modal</button>
|
|
|
|
<!-- Only render after component mounts on client -->
|
|
<Teleport v-if="isMounted" to="body">
|
|
<div v-if="showModal" class="modal">
|
|
Modal content
|
|
</div>
|
|
</Teleport>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue'
|
|
|
|
const showModal = ref(false)
|
|
const isMounted = ref(false)
|
|
|
|
onMounted(() => {
|
|
isMounted.value = true
|
|
})
|
|
</script>
|
|
```
|
|
|
|
**Solution 3 - Vue 3.5+ data-allow-mismatch:**
|
|
```vue
|
|
<template>
|
|
<!-- Suppress hydration warnings for intentional mismatches -->
|
|
<div data-allow-mismatch>
|
|
<Teleport to="body">
|
|
<div v-if="showModal" class="modal">
|
|
Modal content
|
|
</div>
|
|
</Teleport>
|
|
</div>
|
|
</template>
|
|
```
|
|
|
|
## SSR with Multiple Teleports
|
|
|
|
Multiple teleports to the same target can cause additional hydration issues:
|
|
|
|
```vue
|
|
<!-- Parent.vue -->
|
|
<template>
|
|
<!-- First teleport -->
|
|
<Teleport to="#modals">
|
|
<NotificationBanner />
|
|
</Teleport>
|
|
|
|
<ChildComponent />
|
|
</template>
|
|
|
|
<!-- ChildComponent.vue -->
|
|
<template>
|
|
<!-- Second teleport to same target - order matters! -->
|
|
<Teleport to="#modals">
|
|
<Modal />
|
|
</Teleport>
|
|
</template>
|
|
```
|
|
|
|
For SSR, ensure consistent ordering or wrap each in `ClientOnly`.
|
|
|
|
## Element Plus and UI Library SSR
|
|
|
|
Many UI libraries use Teleport internally. Element Plus components that use Teleport include:
|
|
- ElDialog
|
|
- ElDrawer
|
|
- ElTooltip
|
|
- ElDropdown
|
|
- ElSelect
|
|
- ElDatePicker
|
|
|
|
```vue
|
|
<template>
|
|
<!-- These need special SSR handling -->
|
|
<ClientOnly>
|
|
<ElDialog v-model="visible">
|
|
Dialog content
|
|
</ElDialog>
|
|
</ClientOnly>
|
|
</template>
|
|
```
|
|
|
|
## Known Vue Issues
|
|
|
|
- Disabled teleports in fragments can cause hydration mismatches (Vue issue #6152)
|
|
- Nested teleports may cause app to break on hydration (Vue issue #5242)
|
|
|
|
## Reference
|
|
- [Vue.js SSR - Teleports](https://vuejs.org/guide/scaling-up/ssr.html#teleports)
|
|
- [Element Plus SSR Guide](https://element-plus.org/en-US/guide/ssr.html)
|
|
- [Nuxt ClientOnly Component](https://nuxt.com/docs/api/components/client-only)
|