DOM assets are reloaded after hydration

[danielnehrig]

Describe the bug after hydration takes place assets are reloaded. for instance images are loaded twice due to this resulting in longer load times.

To Reproduce Steps to reproduce the behavior:

1. hydrate with a image in the dom

Expected behavior We do not do another redundant network call

Screenshots

Environment

• Sycamore: 0.8.2
• Browser: chrome
• OS: linux

[danielnehrig]

workaround is to set a cache control header so the images are not fetched again but reused.

[arctic-hen7]

No clue really, but could you hypothetically fix this by having all your assets in a non-Sycamore place and then using the shadow DOM to tunnel them through? A component for this shouldn't be impossible as an interim workaround...

[lukechu10]

The problem is that the attribute is being re-set (difference from reset) during hydration which causes the resource to be fetched again. If cache is disabled, that triggers another network request but if cache is enabled, the browser is usually smart enough to just reuse the previous fetched data.

[lukechu10]

A really simple fix might just be to make the following code only run when hydration has completed, just like what is being done in HydrateNode::append_child. https://github.com/sycamore-rs/sycamore/blob/abd556cbc02047042dad2ebd04405e455a9b11b2/packages/sycamore-web/src/hydrate_node.rs#L170-L173

To test that this the attribute is not actually being overwritten during hydration, we could purposefully render something different for the attribute during SSR and compare whether the final attribute after hydration has changed (it should not).

However, once #19 is (finally) implemented, these kinds of bugs should become trivial to fix.