Hydration Re-Renders Entire DOM

[shancarter]

When composing a simple example of a static ssr page with client-side hydration, the client code re-renders the entire DOM rather than just making in-place modifications. Each node seems to be removed and re-created.

Example setup is here with mutation observers: https://github.com/distillpub/svelte-template

GIF of the behavior in action below:

[arxpoetica]

Is this discussion (on Gitter) also relevant? https://gitter.im/sveltejs/svelte?at=5a4ffa5c290a1f456153eb2f You're talking about component-level hydration?

[FaustTobias]

Any updates on this? This still happens and is annoying when working with animations since all css animations are restarted after the hydration.

[tcrowe]

I was talking with a guy in the chat about hydrate and we thought it would only update if something changed but it might re-paint everything!

I made two mov video files here showing the effect. They are named "unecessary-repaint" but in truth it may be necessary to repaint but I think we can avoid it. =]

https://github.com/tcrowe/svelte-hydrate-test/blob/master/repaint-tests-2019-10-24.md

I delayed the paint in svelte and sapper 1sec and refreshed a number of times.

@shancarter @FaustTobias Can you see if this is the same repaint you were looking at some months back?

Thanks! 🙏

[benmccann]

This looks like a duplicate of #4308. (well technically that one's the duplicate since this one was around first, but I think keeping the other would be more useful since it has a PR and a bunch of upvotes)

[Conduitry]

Hydration performance should be significantly improved in 3.38.0 by way of #6204.

[LukeCarlThompson]

I just updated a Sapper app with this latest Svelte version (3.38.0) and found it is now actually duplicating some of the elements on my homepage. It appears like they are created once on the server and then added again on the client side without removing the server created versions. Any html elements I add in are duplicated, but not components.

Not sure if this issue is related to Sapper though.

Unfortunately I am not able to create an isolated example at this time, but will at the next available opportunity.

[johngrasty]

@LukeCarlThompson I’m seeing the same thing with 3.38 and svelte-kit, so it’s not just sapper, and it’s not just you. I likewise haven’t been able to isolate it yet either.

[benmccann]

Fixed in 3.38.1

[benmccann]

There was another bug, so the performance improvement was reverted. I'm going to leave this closed as a duplicate of #4308 and we can track getting the performance improvement reimplemented in that issue