Hydration node mismatch with `.server`/`.client` components

Environment

• Operating System: Linux
• Node Version: v16.14.2
• Nuxt Version: 3.0.0
• Nitro Version: 1.0.0
• Package Manager: npm@7.17.0
• Builder: vite
• User Config: -
• Runtime Modules: -
• Build Modules: -

Reproduction

https://stackblitz.com/edit/github-uy1uwl?file=app.vue

Describe the bug

According to the docs, server-side rendered .server components are replaced with their .client counterparts on the client-side. Unfortunately, this isn’t working as expected and Vue throws an Hydration node mismatch warning even though both files contain the same template without any state dependent dynamic content.

<template>
  <h1>Hello World!</h1>
</template>

Additional context

No response

Logs

[Vue warn]: Hydration node mismatch:
- Client vnode: div 
- Server rendered DOM: <h1>​Hello World!​</h1>​  
  at <Headline.client> 
  at <App key=1 > 
  at <NuxtRoot>

[RajendraUppu]

@harlan-zw it’s weird… i’ve checked it out… but take a look at this once: https://stackblitz.com/edit/github-uy1uwl-8peita?file=app.vue it’s some how working fine with this approach in this repo.

[fkammer]

@RajendraUppu you added the <div> tag in app.vue while @harlan-zw added it to the component template.

I can confirm that wrapping <Headline /> inside a <div> in app.vue resolves the issue. If that is for technical reasons, we should point it out in the docs. I consider wrapping everything in a div for no reason bad practice and wouldn’t normally do that.

The duplication of the component @harlan-zw pointed out seems to be an issue on its own. It still happens if the hydration error is resolved with the approach above. I suggest we move that to its own issue.

Therefore the remaining question on this issue is: Do we need a <div> around the component in the parent element or is it a bug?