Server component cannot be the root element of another server component

[kingyue737]

Environment

---

• Operating System: Linux
• Node Version: v18.20.3
• Nuxt Version: 3.12.2
• CLI Version: 3.12.0
• Nitro Version: 2.9.6
• Package Manager: npm@10.2.3
• Builder: -
• User Config: devtools
• Runtime Modules: -
• Build Modules: -

---

Reproduction

https://stackblitz.com/edit/github-qjtrhd-mtyvxv

Describe the bug

<!-- MyWrapper.server.vue -->
<template>
  <AnotherServerComponent />
</template>

Directly using a server component as another server component's root will cause a hydration warning:

runtime-core.esm-bundler.js:48  [Vue warn]: Hydration node mismatch:
- rendered on server: <!--]-->  
- expected on client: Symbol(v-fgt) 
  at <NuxtIsland name="MyWrapper" lazy=false props= Proxy(Object) {}  ... > 
  at <MyWrapper> 
  at <App key=4 > 
  at <NuxtRoot>

[Vue warn]: Hydration children mismatch on <div data-v-inspector=​"app.vue:​4:​3">​…​</div>​ 
Server rendered element contains fewer child nodes than client vdom. 
  at <NuxtIsland name="MyWrapper" lazy=false props= Proxy(Object) {}  ... > 
  at <MyWrapper> 
  at <App key=4 > 
  at <NuxtRoot>

I think it is at least an undocumented behavior.

Additional context

The previous post in #27731 (comment) was ignored so I reopened a new issue.

Logs

No response

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• github-qjtrhd-mtyvxv (Open reproduction)

[danielroe]

Yes, this should be documented.

cc: @huang-julien

[huang-julien]

it's not really a good practice as we have 2 waterfall for server comps. Let's find a place to add this