encounter " Hydration node mismatch" when using keep-alive in ssr rendering

[tcstory]

Version

3.2.20

Reproduction link

github.com

Steps to reproduce

first, change the App.vue file to the following( replace <Suspense> with <keep-alive>)

<template>
  <div>
    <router-link to="/">Home</router-link>|
    <router-link to="/about">About</router-link>
    <router-view v-slot="{ Component }">
      <keep-alive>
        <component :is="Component" />
      </keep-alive>
    </router-view>
  </div>
</template>

second, run pnpm run dev
third, access http://localhost:3000/

and you will see the error in console panel.

What is expected?

no error is reported

What is actually happening?

there is a error

---

even though the reproduction project is using vite, the error is still there when you using webpack.

[tcstory]

there is a screenshot

[ovidiuc]

I'm having the same problem, using Quasar framework. The component rendered by <router-view> server side is wrapped in a <!--[--> <!--]--> that the client is not expecting.

[mekery]

same problem.

[DoubleJ-G]

I am also noticing something similar also happen with the fragment comments

- Client vnode: div 
- Server rendered DOM: <!--[--> (start of fragment)

Nothing actually seems to be mismatched besides these comments. From what I can tell they are used for v-for and , possibly also for components with more than 1 root element.

[gfordinal]

Same problem here.
Seems to appear on v-for and dynamic components <component :is="" />

@tcstory Could you find a solution?

[semirbabajic]

Was anyone able to find a solution for this? Have the same problem using Quasar 2.5.4 @tcstory

[mefcorvi]

It seems that the server-side rendering code

core/packages/runtime-core/src/components/KeepAlive.ts

Lines 98 to 101 in 1070f12

	if (!sharedContext.renderer) {
	return slots.default
	}

does not match the client-side rendering logic and it should be rewritten like this:

  if (!sharedContext.renderer) {
    return () => {
      if (!slots.default) {
        return null;
      }

      const children = slots.default();
      if (children.length > 1) {
        warn(`KeepAlive should contain exactly one component child.`);
        return children;
      }

      return children[0];
  }
}