fix(ssr): ensure duplicate component VNodes render after hydration

[cernymatej]

fix #14635

This should fix a problem where the renderer incorrectly enters the hydration path for a cloned component VNode during client-side rendering.

core/packages/runtime-core/src/renderer.ts

Lines 1341 to 1344 in 81615d3

	if (el && hydrateNode) {
	// vnode has adopted host node - perform hydration instead of mount.
	const hydrateSubTree = () => {

I'm not familiar with the Vue codebase that much, so please let me know if there is something I might have overlooked. It's a little intimidating for me to touch the renderer 🙈😅

Summary by CodeRabbit

Release Notes

• Bug Fixes

  • Fixed SSR hydration handling when the same component renders multiple times after initial hydration

• Tests

  • Added regression test for duplicate component rendering in SSR hydration scenarios

[coderabbitai]

📝 Walkthrough

Walkthrough

Fixed an SSR hydration regression where duplicate component VNodes rendered after hydration would not display all instances. Modified cloneIfMounted to reset the el and anchor properties to null on cloned vnodes, preventing them from being incorrectly treated as already-mounted during SSR scenarios. Added comprehensive test coverage.

Changes

Cohort / File(s)	Summary
Test Coverage packages/runtime-core/__tests__/hydration.spec.ts, packages/runtime-core/__tests__/vnode.spec.ts	Added SSR hydration regression test validating duplicate component VNodes render correctly after hydration; updated normalizeVNode test to verify cloned VNodes have el and anchor reset to null.
Core Implementation packages/runtime-core/src/vnode.ts	Modified cloneIfMounted to use explicit conditional logic and reset cloned.el and cloned.anchor to null, preventing cloned vnodes from being treated as mounted in SSR hydration scenarios.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

• fix(hmr): avoid hydration for hmr root reload #12450: Also clears el (and anchor) on cloned VNodes to avoid unintended hydration behavior
• fix(runtime-core): invalidate detached v-for memo vnodes after unmount #14624: Addresses related vnode-mount state handling to prevent cloned vnodes from being incorrectly treated as mounted/cached

Suggested labels

scope: ssr, scope: hydration, :hammer: p3-minor-bug

Suggested reviewers

• Doctor-wu
• KazariEX
• baiwusanyu-c

Poem

🐰 A clone that kept its mount state high,
Confused the hydration—we'll tell you why!
With el and anchor set back to null,
Duplicate links now render in full! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 50.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title directly and clearly describes the main fix: ensuring duplicate component VNodes render after hydration in SSR scenarios.
Linked Issues check	✅ Passed	The PR successfully addresses all coding requirements from issue #14635: fixes cloned component VNodes incorrectly entering hydration path, enabling duplicate component instances to render on client after SSR hydration.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to fixing the duplicate component VNode rendering issue: test regression coverage, vnode cloning logic updates, and test assertion refinements for normalized VNodes.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

packages/runtime-core/__tests__/hydration.spec.ts (1)

2142-2144: Prefer DOM-structure assertions over HTML substring matching.

toContain on innerHTML works, but asserting element count/text directly is less brittle across formatting/serialization differences.

♻️ Optional assertion hardening

-    expect(container.innerHTML).toContain(
-      '<p>Click this <a href="#">link</a> and that <a href="#">link</a>.</p>',
-    )
+    const p = container.querySelector('p')
+    expect(p).not.toBeNull()
+    expect(p!.querySelectorAll('a[href="#"]')).toHaveLength(2)
+    expect(p!.textContent).toBe('Click this link and that link.')

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/runtime-core/__tests__/hydration.spec.ts` around lines 2142 - 2144,
Replace the brittle innerHTML substring assertion with DOM-structure checks: use
container.querySelector('p') to get the paragraph and assert its textContent (or
innerText) equals "Click this link and that link.", and use
container.querySelectorAll('p a') to assert there are 2 anchor elements and each
anchor's textContent equals "link"; update the failing expectation that
currently references container.innerHTML to these element-based assertions (look
for the test using the container variable in hydration.spec.ts).

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@packages/runtime-core/__tests__/hydration.spec.ts`:
- Around line 2142-2144: Replace the brittle innerHTML substring assertion with
DOM-structure checks: use container.querySelector('p') to get the paragraph and
assert its textContent (or innerText) equals "Click this link and that link.",
and use container.querySelectorAll('p a') to assert there are 2 anchor elements
and each anchor's textContent equals "link"; update the failing expectation that
currently references container.innerHTML to these element-based assertions (look
for the test using the container variable in hydration.spec.ts).

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: f202c71f-c0b7-404c-b8f0-4dce509ea1ed

📥 Commits

Reviewing files that changed from the base of the PR and between 81615d3 and b00619d.

📒 Files selected for processing (3)

• packages/runtime-core/__tests__/hydration.spec.ts
• packages/runtime-core/__tests__/vnode.spec.ts
• packages/runtime-core/src/vnode.ts

[edison1105]

see #14635 (comment)