Sveltekit Hydration best practices to avoid buttons that do not work when page loads ?

[MarArMar]

Describe the problem

I saw this tweet today :

https://x.com/TkDodo/status/1757037627100869027?s=20

My wife just told me that a website to buy tickets doesn't work. Turns out she was just clicking the button before JS has finished hydrating so it did nothing 🙈. Thanks, SSR...

Non tech savvy ppl don't know that the button will work in 2 seconds. My wife just gave up and said the page is broken and went somewhere else

Is this a problem with Sveltekit too ? And how to avoid it ?

I saw these answers :

See this is where having a fallback with forms actually makes sense, because the functionality will still work while JS is hydrating. Progressive enhancement is key

I always keep around a hook that returns a isHydrated boolean an only render script-dependent UI when it turns true, and some sensible non-scripted fallback otherwise. This Is the (Progressive Enhancement) Way.

Of course frameworks like Qwik get this right, as does remix, where the button would likely just work because it triggers a full page load if there is no JS attached yet. So its more a hydration fault than SSR, but it also doesn't exist at all without SSR

Isn’t it supposed to like capture the events and then fire them once JS is loaded? So it would kinda work but just be slow

It's what qwik does afaik

Every framework can fix this but everyone stop caring. Only Qwik actually does it correctly (you can click and it will work).

Maybe Sveltekit does it as well ?

Describe the proposed solution

Maybe use other options than SSR ??

[dummdidumm]

Yes, this can happen with SvelteKit, too - it can happen with any framework you use. The answer talking about progressive enhancement is the correct way to solve this: Make sure that your page works without JavaScript, too (to the extent possible / necessary). https://kit.svelte.dev/docs/form-actions talks about this in more detail.

[dummdidumm]

People say a lot of things on the internet. It can just as well happen with Qwik if the JavaScript didn't load in time. It's just that the less JavaScript you need to make a page interactive the more likely it is that things are loaded in time. You're in good company with SvelteKit here because SvelteKit apps generally tend to have a lower JavaScript size.

When you're using forms that also work without JavaScript for critical user interaction and use what's outlined in https://kit.svelte.dev/docs/form-actions you don't have 2 separate possibilities to build, test and maintain.

[MarArMar]

Ok interesting, but most of the time I am not using forms, just buttons

[MarArMar]

Do you know if like conditional loading of components helps ?

Like loading the layout, then making something like

{#if mounted} < SubComponent />

Or maybe async imports ?

[TkDodo]

Why does they say it does not happen with Qwik then ?

afaik quick lets you click the button, then it captures the event, starts downloading the js needed for this click event (which is minimal), then replays the event.

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

[MarArMar]

Interesting, would there be a way to make this a lib for sveltekit to do the same ?

I have no idea, just wondering

My sveltekit website is quite big so I fear a big "impossible to interact" period with no solution

[acoyfellow]

I disable a lot of buttons on SSR, this is how I do it @MarArMar:

<button
 disabled={!browser || !stripe}
 on:Click={doSomething}>
  Buy!
  {#if !browser || !stripe}
    <!-- show loader -->
  {/if}
</button>

I style it, too.. Change the color / opacity when it's disabled.

This loads the button in a "loading" state to users, but when the browser has taken over and even third party tools (like stripe.js) fully load - it's ready to go.

[MarArMar]

I think it s a really good way to at least tell your users it is loading, thanks for the suggestion !