Does hydration replace DOM nodes?

[PierBover]

When hydrating in Svelte some DOM nodes are replaced which has many ugly consequences:

• Inputs losing focus
• iframes are reloaded
• CSS animations are restarted
• Audio/video elements restart playing

Does Nano have those issues?

[yandeu]

Nano JSX does replace DOM elements as well. But the point of Nano JSX is to hydrate as few components as possible. (Depends of course on your use-case).

But all the issues you mention, should not happen since you only hydrate the components once at page load.

But maybe I am misunderstanding your question?

[PierBover]

These issues happen because there's a delay between rendering the initial static SSR'd HTML and the JS being downloaded and taking control of the DOM.

Of course this delay will depend a lot on network conditions and device CPU. In some cases this might be imperceivable, and in others it might be detrimental to the user experience.

Here's the Svelte issue if you're interest to know more: sveltejs/svelte#4308

Anyway, thanks for answering. From what you're describing, it seems Nano will probably behave in the same way.

[yandeu]

I see. I am aware of this. This is why I created Nano JSX in the first place. The whole point of Nano JSX is to hydrate as few components as possible. You don't even have to use Nano JSX on the client-side if you don't want to. You have the flexibility to do whatever you want.

If you have an app with inputs, iframes, CSS animations, and video elements, you only need to hydrate the input elements and the buttons for the video to play and pause. The rest will remain untouched. And as I mentioned above, for these simple tasks, you don't even need a JavaScript library on the client-side.

Maybe your video is even at the bottom of the page. This means you should only hydrate it when the user scrolls down. When the user never scrolls down, the code will never load (if you use lazy loading) nor execute.

Hope this helps :)

[PierBover]

What you're proposing makes sense for iframes, but if you have say a <VideoPlayer/> component, obviously it will contain the <video> HTML element. If only the controls are hydrated, wouldn't all the logic that connects the controls to the <video> element inside the <VideoPlayer/> component be lost?

In the case of form inputs, the user could lose focus if it is already interacting with it before the hydration happens. Does hydration with Nano take into account the value of the input when hydrating or is the input element simply replaced and the value lost?

Does Nano have some solution for partially hydrated components to communicate or is this something that has to be hand crafted on each case? For example, the <CartButton/> needs to be updated when the <AddToCartForm/> is submitted.