fix(runtime-core): skip lazy hydration for detached roots

[edison1105]

close #15091

Summary by CodeRabbit

• Bug Fixes

  • Improved lazy hydration reliability by skipping hydration when the target element is not connected (e.g., removed before hydration starts).
  • Prevented unnecessary async component loading and avoided errors for detached SSR content.

• Tests

  • Added an SSR regression coverage for lazy hydration when visibility observers fire after detaching either the root or an ancestor container.

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds connectivity checks that skip lazy hydration for detached SSR nodes and tests the hydrateOnVisible() observer race for detached roots and ancestors.

Changes

Async hydration guard

Layer / File(s)	Summary
Guard and regression coverage packages/runtime-core/src/apiAsyncComponent.ts, packages/runtime-core/__tests__/hydration.spec.ts	Lazy hydration records initial connectivity and returns when the target lacks a parent or becomes disconnected. Regression tests cover detached roots and ancestors without throwing or invoking the async loader.

Estimated code review effort: 2 (Simple) | ~10 minutes

Possibly related PRs

• vuejs/core#13511: Updates async hydration logic and hydration tests for skipped hydration cases.
• vuejs/core#14704: Adjusts async-component lazy hydration behavior and related tests.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	Title clearly summarizes the fix for skipping lazy hydration on detached roots.
Linked Issues check	✅ Passed	The code and tests address the detached-node lazy hydration crash and its race condition.
Out of Scope Changes check	✅ Passed	All changes are confined to the lazy hydration fix and its regression test.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch edison/fix-15091

---

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

[github-actions]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	107 kB (+51 B)	40.4 kB (+16 B)	36.3 kB (+44 B)
vue.global.prod.js	165 kB (+51 B)	60.4 kB (+17 B)	53.7 kB (-32 B)

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	49.2 kB	19.1 kB	17.5 kB
createApp	57.4 kB	22.2 kB	20.3 kB
createSSRApp	61.9 kB	24.1 kB	21.9 kB
defineCustomElement	63.6 kB	24.1 kB	22 kB
overall	72 kB	27.5 kB	25 kB

[pkg-pr-new]

Open in StackBlitz

@vue/compiler-core

pnpm add https://pkg.pr.new/@vue/compiler-core@15092

npm i https://pkg.pr.new/@vue/compiler-core@15092

yarn add https://pkg.pr.new/@vue/compiler-core@15092.tgz

@vue/compiler-dom

pnpm add https://pkg.pr.new/@vue/compiler-dom@15092

npm i https://pkg.pr.new/@vue/compiler-dom@15092

yarn add https://pkg.pr.new/@vue/compiler-dom@15092.tgz

@vue/compiler-sfc

pnpm add https://pkg.pr.new/@vue/compiler-sfc@15092

npm i https://pkg.pr.new/@vue/compiler-sfc@15092

yarn add https://pkg.pr.new/@vue/compiler-sfc@15092.tgz

@vue/compiler-ssr

pnpm add https://pkg.pr.new/@vue/compiler-ssr@15092

npm i https://pkg.pr.new/@vue/compiler-ssr@15092

yarn add https://pkg.pr.new/@vue/compiler-ssr@15092.tgz

@vue/reactivity

pnpm add https://pkg.pr.new/@vue/reactivity@15092

npm i https://pkg.pr.new/@vue/reactivity@15092

yarn add https://pkg.pr.new/@vue/reactivity@15092.tgz

@vue/runtime-core

pnpm add https://pkg.pr.new/@vue/runtime-core@15092

npm i https://pkg.pr.new/@vue/runtime-core@15092

yarn add https://pkg.pr.new/@vue/runtime-core@15092.tgz

@vue/runtime-dom

pnpm add https://pkg.pr.new/@vue/runtime-dom@15092

npm i https://pkg.pr.new/@vue/runtime-dom@15092

yarn add https://pkg.pr.new/@vue/runtime-dom@15092.tgz

@vue/server-renderer

pnpm add https://pkg.pr.new/@vue/server-renderer@15092

npm i https://pkg.pr.new/@vue/server-renderer@15092

yarn add https://pkg.pr.new/@vue/server-renderer@15092.tgz

@vue/shared

pnpm add https://pkg.pr.new/@vue/shared@15092

npm i https://pkg.pr.new/@vue/shared@15092

yarn add https://pkg.pr.new/@vue/shared@15092.tgz

vue

pnpm add https://pkg.pr.new/vue@15092

npm i https://pkg.pr.new/vue@15092

yarn add https://pkg.pr.new/vue@15092.tgz

@vue/compat

pnpm add https://pkg.pr.new/@vue/compat@15092

npm i https://pkg.pr.new/@vue/compat@15092

yarn add https://pkg.pr.new/@vue/compat@15092.tgz

commit: b467cdf

[edison1105]

/ecosystem-ci run

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@packages/runtime-core/src/apiAsyncComponent.ts`:
- Around line 139-140: Update the guard immediately before hydrate() in the
async component flow to check el.isConnected instead of only el.parentNode,
preventing hydration for detached ancestor trees. Add a test covering removal of
the ancestor container and verify hydrate() does not run afterward.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: aeda3925-f69c-4d5d-a82b-3e076857930f

📥 Commits

Reviewing files that changed from the base of the PR and between 9e03beb and 68af909.

📒 Files selected for processing (2)

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

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@packages/runtime-core/__tests__/hydration.spec.ts`:
- Around line 1216-1240: Update the test setup around the hydration detachment
case so the container is declared outside the try block and always removed from
document.body in finally. Preserve the existing root-versus-container detachment
assertions and restore IntersectionObserver as currently implemented, while
ensuring cleanup runs even if the test throws.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: be00944d-531c-4970-8a26-a3ee4637399d

📥 Commits

Reviewing files that changed from the base of the PR and between 68af909 and b467cdf.

📒 Files selected for processing (2)

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

🚧 Files skipped from review as they are similar to previous changes (1)

• packages/runtime-core/src/apiAsyncComponent.ts

[vue-bot]

📝 Ran ecosystem CI: Open

suite	result	latest scheduled
nuxt	✅ success	✅ success
vue-simple-compiler	✅ success	✅ success
quasar	✅ success	✅ success
router	✅ success	✅ success
test-utils	✅ success	✅ success
language-tools	✅ success	✅ success
primevue	✅ success	✅ success
radix-vue	✅ success	✅ success
pinia	✅ success	✅ success
vue-macros	✅ success	✅ success
vant	✅ success	✅ success
vue-i18n	✅ success	✅ success
vueuse	✅ success	✅ success
vuetify	✅ success	❌ failure
vite-plugin-vue	✅ success	✅ success
vitepress	✅ success	✅ success