Second instance of a duplicate component VNode isn't rendered on the client-side when using SSR

[cernymatej]

Vue version

3.5.31

Link to minimal reproduction

https://play.vuejs.org/#__SSR__eNqdU9tu00AQ/ZVheXAqGVso8BIlEaUECQQFlYgXFiFjj+Nt7F1rL0mqyP/OrC+NU9E+dF/suZ05Z3b2yC7rOto5ZDM2N6kWtQWD1tVLLkVVK23hCEUIGvMQMsyFxCtFfonSQgO5VhUEVB5wyWWqpLHw9e6LkFtYPEyfHLkEOi385AJ60x9NLi2BnIslFJMgCULflprOIHgZQBNCUBJocNHVNFw29Hvq+cHVpUgTi2sk69mtR35/OmzfmCCLSSespzCcOCYIZ9CALRBMUiGVDQP6ea0y9LNDjTJFsHuR4nl9359E1yT6V3BFOraEJQyQ7XuTdkhkRr7EjnxR8HtEhSZyNhiitXslcjAKhIVKOWkNXH5cr26guMt0YoUi0VJZyJwWckNFnVpTqD2pJc6TPCkNUmAed4tBK0GGxaouadJk+Y7zv85awnqXeuILznqAF/7L2XKtNpsS53GXNhSd35dn2ldyBnHbp00r9FDg97FT2vE9qZj1GfGQ8gDcw83jEWsWMmtIbC420a1Rkja/vXfO/MWJEvW32gMbzmbDRnCWlKXaf259VjsMB39aYLr9j//WHLyPs+8aDeodcnYfs4neoO3Cqx/XeKD/+2ClMldS9hPBGzSqdJ5jl/beyYxoj/Jatp/a90vDWpvVwaI0gyhP1Gc2bT5n9H79U3lM+onuNHrT1tGW0RT/7FB7TBrgNHobTV+z5h//zV4x

Steps to reproduce

Use a SSR app with a component where the render function uses the same component VNode reference at multiple positions in the children array.
The component must be mounted on the client after initial hydration (e.g. via v-if).

---

For context: I stumbled upon this issue when using vue-i18n's <i18n-t> component with a translation message containing the same named placeholder twice (e.g. "Click this {link} and that {link}."). Internally, <i18n-t> calls the slot function once and reuses the returned VNode for each occurrence of the placeholder:

<!-- someMessage: "Click this {link} and that {link}." -->
<i18n-t keypath="someMessage">
    <template #link>
        <NuxtLink>
            link
        </NuxtLink>
    </template>
</i18n-t>

What is expected?

"Click this link and that link."
Both instances of the component should render independently.

What is actually happening?

"Click this link and that ."

The second instance silently doesn't render. This only affects:

• component VNodes (plain element VNodes render both instances correctly)
• createSSRApp - with createApp both instances render correctly
• components mounted after initial hydration. During SSR hydration itself both instances render correctly.

System Info

Any additional comments?

No response

[skirtles-code]

Is this the same scenario described in the docs here?

• https://vuejs.org/guide/extras/render-function.html#vnodes-must-be-unique

As far as I'm aware those docs still apply in the latest Vue, so while it might work by chance in some cases, I think reusing the same VNode in multiple places within the tree is considered invalid usage.

[cernymatej]

@edison1105 but shouldn't the behaviour be consistent between SSR and non-SSR apps, though?
Also, see this: #3670
This looks like it is intentionally supported, doesn't it?

const c = slots.default!()
return [c, c, c]

From the docs:

the vnode will be rendered as-is

To me, this doesn't sound like it should be a problem to have 2 instances of the same VNode as children. If this is really the case, I think we should update the docs to state that more explicitly. However, as I already said, I think it looks like this should be supported based on the the component VNode should be cloned when reusing it test and the behaviour in non-SSR mode.
I feel like the docs state that there are caveats when using this approach ("This pattern should be used with care" - like sharing state?), but it can be used when you understand the implications.