Better hydration

[thednp]

Hi @Tao-VanJS and everyone else! 🍨

You know I'm working on vite-plugin-vanjs and create-vanjs and I can't seem to get any SSR app to score 100 on Lighthouse, only 99, so I identified the issues, solved some, but and I need your help to make it work real good.

The "problem"
After client receives the HTML markup from the server, the client hydrates the entire page (or parts of it if you look at the SSR examples in create-vanjs, perhaps similar to islands but not really that far), so I figured we need a way to identify only interactive/reactive elements and only hydrate those.

My idea
My vite-plugin-vanjs can be a great platform to extend VanJS beyond 1Kb, just a few bytes, here's how: we can create another Proxy for the van.tags object (within the vite-plugin-vanjs) so that on the server van.tags will add a data-hk (unique hydration key) attribute that we can use in the client to identify and hydrate. We only need to do this operation ONCE, since the client will re-hydrate the router outlet with any path change/interaction. The difficulty I find is how to identify these elements from a VanJS page component to only hydrate those without re-rendering the entire page. The re-rendering is signaled in Lighthouse as a layout shift of about 0.068ms (which is ridiculous btw). So please kickstart a starter template (npm create vanjs@latest), play around and let me know how you would approach this. I think this would be a much welcome feature if it was to be implemented into the core and van-plate.

Other developments
I've fixed some small issues with the router I'm working on, it should work fine with SPAs now. BUT, I've been working on a FileSystem routing functionality and it's working pretty well so far, stay tuned for that. It's going to work similar to how SolidStart works, but much more simple and hopefully more efficient. Once I have this part working, I'll get back to the hydration functionality and I hope I can get your instructions and any guides/ideas, hopefully soon.

See you soon 🍦