Add Resumability (allowing JS execution even during hydration) or Partial Hydration

MarArMar commented 7 months ago

Describe the problem

Sveltekit, like most JS frameworks, blocks initial user actions during hydration

https://github.com/sveltejs/kit/discussions/11836

This causes real user frustration and issues as mentioned in the examples

Resumability

A framework, Quik, apparently solved that problem with a concept called Resumability

https://qwik.dev/docs/concepts/resumable/

Qwik solves the above issue by serializing the event listeners into DOM like so:
<button on:click="./chunk.js#handler_symbol">click me</button>
Qwik still needs to collect the listener information, but this step is done as part of the SSR/SSG. The results of SSR/SSG are then serialized into HTML so that the browser does not need to do anything to resume the execution. Notice that the on:click attribute contains all of the information to resume the application without doing anything eagerly.

Partial Hydration

There is another solution called Partial Hydration that might be also great and is apparenlty implemented by Astro :

https://docs.astro.build/en/concepts/islands/

Basically selectively hydrate components

It might be a good alternative especially if we can select maybe the components we want to be hydrated fast

Describe the proposed solution

Add Resumability mechanism to Sveltekit

Alternatives considered

Asking for best practices to hydration : https://github.com/sveltejs/kit/discussions/11836
The option to build a website the works both with and without Javascript : creates something like 2 separate possibilities to have to build, test and maintain for each interaction. So it adds both quite a lot of developement time and risks of bugs or inconsistencies for the user

Importance

would make my life easier

Rich-Harris commented 7 months ago

Resumability is not something you simply 'add', nor does it come without significant trade-offs which we do not want.

Qwik's marketing depends on convincing you that hydration is the thing standing between you and a usable app. It's not. Most of the time, what's blocking the main thread during startup is all the third party crap that gets added to many websites.

There is room for faster hydration. Svelte 5 makes some progress in this direction, with more planned. But in the meantime, I ask you to actually measure your app's performance (both lab data and RUM) — you will likely find that hydration is not in fact a problem. And as was explained in the linked discussion, if it is then the solution is to use progressive enhancement, which you should be doing anyway for anything critical.

MarArMar commented 7 months ago

Ok thank you for the explanation

Great to know Svelte 5 makes hydration faster

sveltejs / kit