search

frandiox / vite-ssr

Use Vite for server side rendering in Node
MIT License
823 stars 91 forks source link

Feature #173: Vue Body Teleport support #207

Open phlegx opened 1 year ago

phlegx commented 1 year ago

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).

<ClientOnly>
  <Teleport to="body">
    ...
  </Teleport>
</ClientOnly>

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).

<Teleport to="#body-teleports">
  ...
</Teleport>

with index.html like:

...
<body>
  <div id="app"></div>
  <div id="body-teleports"></div>
</body>

This is a solution for SSR body teleports only! Teleports inside root element (#app) should currently be wrapped as ClientOnly.

phlegx commented 1 year ago

@frandiox what do you think about this PR?

phlegx commented 1 year ago

Hi @frandiox ! Can we merge this PR please?

TimoStolz commented 11 months ago

I have the same issue and would like to have this feature.