fix(runtime-core): avoid re-fetching resource props with unchanged values

[danielroe]

related: #9033

spotted in an issue in #9083 in our ecosystem-ci tests for nuxt/image

vue now writes dynamic props unconditionally, which means that for resource attributes (src/srcset/href/poster) that write restarts the network request

I think it's better just to write dynamic props if the value differs, but there's probably no issue for other attributes, so I've restricted to just those four resource props

Summary by CodeRabbit

• Bug Fixes
  • Improved SSR hydration for resource attributes such as src, srcset, href, and poster.
  • Avoided unnecessary updates when server-rendered and client-rendered resource values already match.
  • Added coverage to ensure mismatched resource values are correctly patched during hydration.

[coderabbitai]

📝 Walkthrough

Walkthrough

Hydration now compares existing resource attributes with client-rendered values, skipping unchanged writes and patching mismatches. Tests cover matching and differing image src values.

Changes

Hydration resource prop handling

Layer / File(s)	Summary
Resource prop comparison and patching packages/runtime-core/src/hydration.ts	Hydration skips writes for unchanged src, srcset, href, and poster values while patching differing values.
Hydration regression coverage packages/runtime-core/__tests__/hydration.spec.ts	Tests verify that matching image src values are not rewritten and differing values update the DOM.

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

Possibly related PRs

• vuejs/core#9083: Changes the same hydration prop-patching loop for dynamic properties.

Suggested labels: scope:hydration, scope: ssr

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly matches the main change: avoiding unnecessary re-fetches by skipping unchanged resource prop writes during hydration.

✨ 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.}

[pkg-pr-new]

Open in StackBlitz

@vue/compiler-core

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

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

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

@vue/compiler-dom

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

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

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

@vue/compiler-sfc

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

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

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

@vue/compiler-ssr

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

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

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

@vue/reactivity

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

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

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

@vue/runtime-core

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

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

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

@vue/runtime-dom

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

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

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

@vue/server-renderer

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

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

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

@vue/shared

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

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

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

vue

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

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

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

@vue/compat

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

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

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

commit: b660dbd

[github-actions]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	107 kB (+137 B)	40.5 kB (+89 B)	36.4 kB (+71 B)
vue.global.prod.js	166 kB (+137 B)	60.6 kB (+79 B)	53.9 kB (+80 B)

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	49.2 kB	19.1 kB	17.5 kB
createApp	57.3 kB	22.2 kB	20.3 kB
createSSRApp	62 kB (+137 B)	24.1 kB (+69 B)	22 kB (+59 B)
defineCustomElement	63.5 kB	24.1 kB	22 kB
overall	71.9 kB	27.5 kB	25 kB

[coderabbitai]

🧹 Nitpick comments (1)

packages/runtime-core/src/hydration.ts (1)

815-829: 🩺 Stability & Availability | 🔵 Trivial | 💤 Low value

Use String() to safely stringify values and prevent Symbol crashes.

If clientValue happens to be a Symbol, template literal stringification (${clientValue}) throws a TypeError. Upstream patchAttr explicitly guards against this by converting Symbols to strings. Using String(clientValue) achieves the same coercion but handles Symbols gracefully, aligning with the crash resilience in patchAttr.

♻️ Proposed refactor

 function isUnchangedResourceProp(
   el: Element,
   key: string,
   clientValue: any,
 ): boolean {
   if (!resourceProps.has(key)) {
     return false
   }
   // compare against the rendered attribute rather than the reflected DOM
   // property, which normalizes URLs to absolute form.
   return (
-    el.getAttribute(key) === (clientValue == null ? null : `${clientValue}`)
+    el.getAttribute(key) === (clientValue == null ? null : String(clientValue))
   )
 }

🤖 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/src/hydration.ts` around lines 815 - 829, Update
isUnchangedResourceProp to stringify non-null clientValue with String() instead
of template-literal interpolation, preserving the existing null handling and
attribute comparison while allowing Symbol values without throwing.

🤖 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.

Nitpick comments:
In `@packages/runtime-core/src/hydration.ts`:
- Around line 815-829: Update isUnchangedResourceProp to stringify non-null
clientValue with String() instead of template-literal interpolation, preserving
the existing null handling and attribute comparison while allowing Symbol values
without throwing.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 8f916c5f-0149-41a2-8de0-c472580b2e81

📥 Commits

Reviewing files that changed from the base of the PR and between fa2885d and a25e72f.

📒 Files selected for processing (2)

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

[coderabbitai]

🧹 Nitpick comments (1)

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

2812-2839: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick win

Cover the other resource properties as well.

These tests validate only src, while the shared hydration logic also changes srcset, href, and poster. Add matching and differing cases for those properties, or verify that equivalent coverage already exists elsewhere.

Also applies to: 2841-2861

🤖 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 2812 - 2839,
The hydration tests around the existing unchanged src case cover only one
resource property. Extend the hydration test coverage to include matching and
differing values for srcset, href, and poster, reusing the same setter-spy
pattern to verify unchanged properties are not rewritten and changed properties
are updated; avoid duplicating cases if equivalent coverage already exists
elsewhere.

🤖 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.

Nitpick comments:
In `@packages/runtime-core/__tests__/hydration.spec.ts`:
- Around line 2812-2839: The hydration tests around the existing unchanged src
case cover only one resource property. Extend the hydration test coverage to
include matching and differing values for srcset, href, and poster, reusing the
same setter-spy pattern to verify unchanged properties are not rewritten and
changed properties are updated; avoid duplicating cases if equivalent coverage
already exists elsewhere.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 7e15c832-91b2-4166-a0d0-adaef23e8d82

📥 Commits

Reviewing files that changed from the base of the PR and between a25e72f and b660dbd.

📒 Files selected for processing (2)

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

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

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

[edison1105]

/ecosystem-ci run

[vue-bot]

📝 Ran ecosystem CI: Open

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