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 🍦

[thednp]

Some updates on the progress:

Filesystem routing is complete

• it works with params, route groups, nested layouts, lazy loading and code splitting,
• it registers your routes set in "src/routes" folder of your app,
• "src/routes" and "src/pages" are now reserved by the prerender.js in starter templates,

Hydration system is complete

• it won't re-render the page on first hydration, but will look for interactive elements,
• under the hood, we created a proxy for both van and van-plate to add the "data-hk" attribute to all elements with events and / or state attributes attached, this means that if you use addEventListener inside your components/pages without "on[EVENT_NAME]" attributes, you will have to add the "data-hk" attribute manually;
• a simple and efficient diff system is used to match identical tree structures of the server side rendered hydration targets and their client side rendered counterparts,
• subsequent navigation uses regular hydration,

Other notes

• the Lighthouse page score is 100 with ZERO blocking time, 🥳
• we will have to add some wiki one of these days, so you will know more soon,
• some fine tuning to do and tests need to be updated, it will take some time.

Would you like to test?

[thednp]

Alright guys, vite-plugin-vanjs, create-vanjs are now updated.

npm create vanjs@latest

..then pick any routing/SSR template.

Important Changes

• plugin now has a wiki
• new starter templates for routing;
• SSR templates are now featuring file-system routing;
• MANY fixes have been implemented for DX, stability.

I'm tagging you all to check at your convenience.
@Tao-VanJS @sirenkovladd @Ashvith10

@yahia-berashish @auryn31 perhaps an update video would help if you are boring 🍡
@codediodeio sorry to tag you, but if you need an ad slot, how about a VanJS in 100s video? (1Kb react killer yes?)

TO DO

• added templates and plugins VanJS to AwesomeVite,
• add a simple data layer for the plugin,
• the plugin's router needs to handle throws/redirects,
• improve/update the starter templates.

Cheers everyone!

[Ashvith10]

@thednp thanks for the ping. I was wondering - what was the purpose of prerender.js file? Is there a reference project to understand the patterns?

I've also noticed several JS files in TS templates - is that intentional?

[Ashvith10]

Now that I see, the project skeleton resembles SolidStart and TanStack Start - both of which I've not delved into that deep, as I am learning about NextJS atm.

[thednp]

@Ashvith10 prerender.js is there to generate SSG sites/apps. About several JS files in TS templates you need to be more specific.

[Ashvith10]

@thednp for example, inside template-node-ssr-ts and other similar ts templates, there's the prerender.js and server.js.

[thednp]

@Ashvith10 these two files are standard (especially first) for vite starter templates, in short:

• server.js is a basic ExpressJS server to provide SSR
• prerender.js is a script that produces static pages where there is little to no dynamic content