173: Like described in the official documentation of vue, we should consider to use an own DOM node for Vue body teleports:
Avoid targeting body when using Teleports and SSR together - usually, <body> will contain other server-rendered content which makes it impossible for Teleports to determine the correct starting location for hydration. Instead, prefer a dedicated container, e.g. <div id="teleported"></div> which contains only teleported content.
We have two possible solutions:
1. Teleport components are rendered only on client side (no hydration node mismatch).
173: Like described in the official documentation of vue, we should consider to use an own DOM node for Vue body teleports:
Avoid targeting body when using Teleports and SSR together - usually,
<body>
will contain other server-rendered content which makes it impossible for Teleports to determine the correct starting location for hydration. Instead, prefer a dedicated container, e.g.<div id="teleported"></div>
which contains only teleported content.We have two possible solutions:
1. Teleport components are rendered only on client side (no hydration node mismatch).
But that eliminates a huge bonus from using SSR, as web crawlers (SEO) are not able to traverse JS. E.g. main menu as offcanvas side menu.
2. Required SSR rendering of body teleport components, by using a unique DOM node outside app node (solves hydration node mismatch).
with
index.html
like:This is a solution for SSR body teleports only! Teleports inside root element (
#app
) should currently be wrapped asClientOnly
.