TransitionGroup hydration mismatch (caused by comment)

[fabkho]

Vue version

3.5.x

Link to minimal reproduction

https://stackblitz.com/edit/vue-ssr-example-9tg6p3?file=app.js

Steps to reproduce

Steps to Reproduce

1. Create a server-side rendered app.
2. Use TransitionGroup.
3. Include a comment inside the TransitionGroup.

Describe the Bug
A hydration mismatch occurs inside a TransitionGroup when a comment is present.

[Vue warn]: Hydration children mismatch on <div>​…​</div>​ 
Server rendered element contains more child nodes than client vdom. 
  at <TransitionGroup tag="div" > 
  at <App>

Code Example

<div>
  <transition-group tag="div">
    <div v-for="(item, index) in data" :key="item.id">
      {{ item.name }}
    </div>
    <!--test-->
    <div v-if="false" :key="3"></div>
  </transition-group>
</div>

What is expected?

No hydration error

What is actually happening?

A hydration error

System Info

System:
    OS: macOS 14.3.1
    CPU: (12) arm64 Apple M2 Max
    Memory: 1.96 GB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.0 - ~/.nvm/versions/node/v20.11.0/bin/node
    Yarn: 1.22.21 - /opt/homebrew/bin/yarn
    npm: 10.2.4 - ~/.nvm/versions/node/v20.11.0/bin/npm
    pnpm: 9.0.6 - ~/Library/pnpm/pnpm
  Browsers:
    Chrome: 127.0.6533.89
    Safari: 17.3.1

Any additional comments?

Related Nuxt issue: #28381

[neehhaa06]

Hello @edison1105 :)

fix: #11958

Please, remove any comments and avoid introducing conditional elements that do not match between server and client renders. Specifically, instead of including a comment or an empty

withv-if="false", restructure your code to eliminate such nodes. Ensure that the rendered output on both the server and client sides remains consistent by using a single source of truth for your data rendering, thereby preventing discrepancies during the hydration process.