Hydration doesn't see the DOM diff

[vchirikov]

Describe the bug

Hi, I ran into issue with solidjs hydrate(), it doesn't see changes in the DOM between server/client render.

I use 2 IoC containers (inversifyjs) and code see the changes (createEffect, createMemo), but hydrate() doesn't update the DOM.

I've created a minimal repro without inversifyjs:

If I render() same code, I see right DOM, but hydrate() doesn't see the diff:

Your Example Website or App

https://github.com/vchirikov/solidjs-repro

Steps to Reproduce the Bug or Issue

1. git clone https://github.com/vchirikov/solidjs-repro
2. cd solidjs-repro
3. npm install
4. npm run dev

---

see the gif

Expected behavior

As a user I expect that hydrate() must check all the page and rerender changed parts.

Screenshots or Videos

Platform

• OS: Windows
• Browser: Vivaldi
• Version: 5.7.2921.60 (Stable channel)

Additional context

No response

[ryansolid]

The idea of hydration is to resume the state of the app in the exact same state it was in the server. It isn't a diffing process. If it doesn't match up then we don't know for sure that we are showing the correct state for future changes. There was a time that I was concerned with trying to heal things towards the client being the source of truth, but directionally as we look to do less and less client-side hydration the only solution is for the server to be the source of truth of that initial render as we may never even hydrate parts of the application.

For this reason client and server should match initially and any changes you wish to occur need to happen triggered by an onMount or createEffect hook which only runs on the client.

[vchirikov]

So it's my fault, ok, thanks.
It wasn't clear for me that hydrate doesn't check the diff.

@ryansolid , could you add this to the docs?
as an example react docs about their hydrate() has caveats.

btw react has the same rule - do not rely on diffing in hydrate() 👍

One question before closing, what should I use to rerender whole tree after hydration as fast as I can? (inversify container in top context):

• onMount
• createEffect
• createRenderEffect (as docs says refs might not work, but it after hydration so dom elements are there, only text might be changed, so it's safe to use it, isn't it?)
• createComputed (docs: is the most immediate form of reactivity in Solid)
• createResource + onHydrated option

[ryansolid]

onMount or createEffect. The others will run during hydration. That being said they won't re-render the whole dom but allow you to trigger an update that could update relevant locations.

[vchirikov]

Thanks again, I will try.