Skip to content

<img src> re-downloaded on hydration because all attributes are unconditionally re-applied #4157

@tikitko

Description

@tikitko

Problem
During SSR hydration, Yew unconditionally re-applies every attribute to the already rendered DOM element. For attributes like src on <img>, setting the attribute again even to the same value - causes the browser to restart the resource fetch, resulting in duplicate network requests.

Steps To Reproduce

  1. Create a Yew app with SSR + hydration enabled.
  2. Render an <img> with a src attribute server-side.
  3. To make the issue clearly observable, introduce an artificial delay before the WASM bundle is loaded. This ensures the browser has time to fully download the resource from the SSR-rendered HTML before hydration runs and resets the attribute.
  4. Open DevTools → Network tab before the page loads.
  5. Load the page and wait for the initial resource fetch to complete.
  6. Once WASM starts and hydration runs, observe the same resource being fetched a second time.

Expected behavior
During hydration, attributes that already have the correct value on the SSR-rendered DOM element should not be re-applied. No duplicate network requests should occur.

Environment:

  • Yew version: master
  • Rust version: any
  • Target: wasm32-unknown-unknown
  • Build tool: trunk / wasm-pack
  • OS: any
  • Browser and version: any, (FireFox tested)

Root cause (for reference)

packages/yew/src/dom_bundle/btag/mod.rs - the hydrate impl for VTag calls attributes.apply(root, &el) which unconditionally calls el.set_attribute(k, v) for every attribute, regardless of whether the DOM already has that value.

Questionnaire

  • I'm interested in fixing this myself but don't know where to start
  • I would like to fix and I have a solution
  • I don't have time to fix this right now, but maybe later

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions