fix(hydration): force patch dynamic props when hydrating by baiwusanyu-c · Pull Request #9083 · vuejs/core

baiwusanyu-c · 2023-08-30T03:33:46Z

close: #9033
The same code is executed on the client and the server, but some dynamic props may be inconsistent between the two runs (such as timestamps)， I think they should always be consistent with the client

Summary by CodeRabbit

Bug Fixes
- Improved hydration behavior so dynamic properties are applied correctly during page load, even when server-rendered content differs.
- Hydration now updates only the explicitly dynamic attributes for an element, reducing unexpected changes to other server-provided values.
Tests
- Added coverage for dynamic prop hydration and selective attribute patching.

github-actions · 2023-08-30T03:35:08Z

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	106 kB (+45 B)	40.2 kB (+27 B)	36.1 kB (+41 B)
vue.global.prod.js	165 kB (+45 B)	60.2 kB (+23 B)	53.5 kB (+20 B)

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	48.8 kB	19 kB	17.4 kB
createApp	56.9 kB	22 kB	20.1 kB
createSSRApp	61.2 kB (+45 B)	23.8 kB (+30 B)	21.7 kB (+15 B)
defineCustomElement	63.1 kB	23.9 kB	21.8 kB
overall	71.7 kB	27.4 kB	25 kB

…Hydrate # Conflicts: # packages/runtime-core/__tests__/hydration.spec.ts # packages/runtime-core/src/hydration.ts

nobunobu · 2024-01-10T19:30:26Z

up

…psHydrate # Conflicts: # packages/runtime-core/__tests__/hydration.spec.ts

…psHydrate # Conflicts: # packages/runtime-core/__tests__/hydration.spec.ts # packages/runtime-core/src/hydration.ts

pkg-pr-new · 2024-09-05T06:55:46Z

Open in StackBlitz

@vue/compiler-core

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

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

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

@vue/compiler-dom

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

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

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

@vue/compiler-sfc

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

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

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

@vue/compiler-ssr

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

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

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

@vue/reactivity

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

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

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

@vue/runtime-core

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

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

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

@vue/runtime-dom

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

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

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

@vue/server-renderer

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

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

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

@vue/shared

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

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

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

vue

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

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

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

@vue/compat

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

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

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

commit: b922529

# Conflicts: # packages/runtime-core/src/hydration.ts

coderabbitai · 2026-06-25T02:41:38Z

📝 Walkthrough

Walkthrough

Hydration now considers vnode dynamic props when deciding whether to patch server-rendered elements, and it only applies prop updates for keys marked dynamic. Tests cover production innerHTML hydration and selective patching of id while leaving value unchanged.

Changes

Hydration dynamic-prop patching

Layer / File(s)	Summary
Hydration prop patching `packages/runtime-core/src/hydration.ts`	`hydrateElement` now treats `dynamicProps` as a trigger to hydrate props and children, and `patchProp` is called for keys listed in `dynamicProps`.
Hydration test coverage `packages/runtime-core/__tests__/hydration.spec.ts`	Adds coverage for production `innerHTML` hydration and for patching only the dynamic `id` prop while preserving the server `value`.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Suggested labels

scope:hydration, 🔨 p3-minor-bug`

Suggested reviewers

Doctor-wu

Poem

A bunny hopped through hydration’s glow 🐇
Marked props twinkled in a tidy row
id leapt forward, value stayed still
innerHTML hopped to the client’s will
Snip-snap, the server leaves didn’t snarl the show

🚥 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	The title clearly describes the main change: forcing hydration to patch dynamic props.
Linked Issues check	✅ Passed	The hydration logic and tests address the reported dynamic prop mismatch behind `#9033`, including v-html/innerHTML behavior.
Out of Scope Changes check	✅ Passed	The diff stays focused on hydration behavior and related tests, with no unrelated feature or refactor changes.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ 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

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

edison1105 · 2026-06-25T02:43:21Z

/ecosystem-ci run

coderabbitai

Actionable comments posted: 1

🧹 Nitpick comments (1)

packages/runtime-core/__tests__/hydration.spec.ts (1)
2676-2722: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Add a direct img src hydration regression test for the reported case.

Given the linked objective explicitly calls out img src, adding one focused assertion for dynamic src patching would lock coverage to the original bug report.
🤖 Prompt for 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.

In `@packages/runtime-core/__tests__/hydration.spec.ts` around lines 2676 - 2722,
Add a focused hydration regression test for the reported img src case alongside
the existing force-patch dynamic props coverage. In the hydration spec, extend
the test area around mountWithHydration/createVNode to cover an img element with
a declared dynamic src prop, then assert the hydrated DOM updates src from
server to client while leaving unrelated props untouched. Use the existing
hydration helpers and PatchFlags.PROPS pattern so the new test directly
exercises the same path as the current dynamic-props tests.

🤖 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 2679-2699: The hydration test mutates the global __DEV__ flag and
currently restores it to a hardcoded true, which can leak state if the prior
value was different. In the hydration.spec.ts test around mountWithHydration,
capture the original __DEV__ value before setting it to false, then restore that
saved value in the finally block instead of assuming true. Keep the change
localized to this test so the global state is properly isolated.

---

Nitpick comments:
In `@packages/runtime-core/__tests__/hydration.spec.ts`:
- Around line 2676-2722: Add a focused hydration regression test for the
reported img src case alongside the existing force-patch dynamic props coverage.
In the hydration spec, extend the test area around
mountWithHydration/createVNode to cover an img element with a declared dynamic
src prop, then assert the hydrated DOM updates src from server to client while
leaving unrelated props untouched. Use the existing hydration helpers and
PatchFlags.PROPS pattern so the new test directly exercises the same path as the
current dynamic-props tests.

🪄 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: f3687596-9029-488d-8ec5-941ed8007ff4

📥 Commits

Reviewing files that changed from the base of the PR and between 325eb1d and b922529.

📒 Files selected for processing (2)

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

vue-bot · 2026-06-25T03:02:43Z

📝 Ran ecosystem CI: Open

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

fix(hydration): force patch dynamic props when hydrating

c0986d7

baiwusanyu-c marked this pull request as ready for review August 30, 2023 03:33

Merge branch 'main' into bwsy/fix/dynamicPropsHydrate

5b1b115

sxzz added the scope: ssr label Sep 1, 2023

baiwusanyu-c and others added 4 commits November 13, 2023 13:14

Merge remote-tracking branch 'origin/main' into bwsy/fix/dynamicProps…

1f5b562

…Hydrate # Conflicts: # packages/runtime-core/__tests__/hydration.spec.ts # packages/runtime-core/src/hydration.ts

Merge branch 'main' into bwsy/fix/dynamicPropsHydrate

9613bcc

Merge remote-tracking branch 'origin/main' into bwsy/fix/dynamicProps…

a0ff004

…Hydrate # Conflicts: # packages/runtime-core/__tests__/hydration.spec.ts # packages/runtime-core/src/hydration.ts

[autofix.ci] apply automated fixes

a9cc99f

walpolea mentioned this pull request Mar 2, 2024

SSR and Client-Hydrated Vue Components do not fully hydrate to client-rendered DOM as stated in the documentation #10445

Closed

Merge remote-tracking branch 'upstream/main' into bwsy/fix/dynamicPro…

0e4cfb4

…psHydrate # Conflicts: # packages/runtime-core/__tests__/hydration.spec.ts

skirtles-code reviewed Jun 9, 2024

View reviewed changes

Comment thread packages/runtime-core/__tests__/hydration.spec.ts Outdated

edison1105 added 🐞 bug Something isn't working ready to merge The PR is ready to be merged. labels Aug 20, 2024

Merge remote-tracking branch 'upstream/main' into bwsy/fix/dynamicPro…

227eaf1

…psHydrate # Conflicts: # packages/runtime-core/__tests__/hydration.spec.ts # packages/runtime-core/src/hydration.ts

edison1105 added 2 commits June 25, 2026 10:16

Merge remote-tracking branch 'origin/main' into pr/baiwusanyu-c/9083

21114b1

# Conflicts: # packages/runtime-core/src/hydration.ts

fix(hydration): hydrate compiler-tracked dynamic props

b922529

edison1105 removed this from Issue / PR Management Jun 25, 2026

coderabbitai Bot reviewed Jun 25, 2026

View reviewed changes

Comment thread packages/runtime-core/__tests__/hydration.spec.ts

edison1105 merged commit 024cf06 into vuejs:main Jun 25, 2026
14 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

fix(hydration): force patch dynamic props when hydrating#9083

fix(hydration): force patch dynamic props when hydrating#9083
edison1105 merged 10 commits into
vuejs:mainfrom
baiwusanyu-c:bwsy/fix/dynamicPropsHydrate

baiwusanyu-c commented Aug 30, 2023 •

edited by coderabbitai Bot

Loading

Uh oh!

github-actions Bot commented Aug 30, 2023 •

edited

Loading

Uh oh!

nobunobu commented Jan 10, 2024

Uh oh!

Uh oh!

pkg-pr-new Bot commented Sep 5, 2024 •

edited

Loading

Uh oh!

coderabbitai Bot commented Jun 25, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Suggested labels

Suggested reviewers

Poem

Uh oh!

edison1105 commented Jun 25, 2026

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

vue-bot commented Jun 25, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

Uh oh!

Uh oh!

Conversation

baiwusanyu-c commented Aug 30, 2023 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

github-actions Bot commented Aug 30, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Size Report

Bundles

Usages

Uh oh!

nobunobu commented Jan 10, 2024

Uh oh!

Uh oh!

pkg-pr-new Bot commented Sep 5, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented Jun 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Suggested labels

Suggested reviewers

Poem

Uh oh!

edison1105 commented Jun 25, 2026

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

vue-bot commented Jun 25, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

baiwusanyu-c commented Aug 30, 2023 •

edited by coderabbitai Bot

Loading

github-actions Bot commented Aug 30, 2023 •

edited

Loading

pkg-pr-new Bot commented Sep 5, 2024 •

edited

Loading

coderabbitai Bot commented Jun 25, 2026 •

edited

Loading