Lazy loading and hydrating a component

[thanhlmm]

Inspiring of Island Architecture and Partial Hydration in Astro

I think we will gain lots of benefits when

• SSR return static (ONLY HTML + CSS) component
• When the component is in the viewport, try to load its JS and rehydrating it

By doing so, we can benefit from

• Reduce JS on the first load and we gonna save parse, execute time => Improve TTI
• Sometimes, we only need static HTML, then we can disable loading JS for that component

I make a PoC and trying to evaluate on our website so I post here if we can take advantage of it to go further

• PoC: https://codesandbox.io/s/lazyload-lazyhydrating-nextjs-id9ro
• Demo: https://csb-id9ro.vercel.app/
• Quick script to try on your project: https://gist.github.com/thanhlmm/1ca92b01db81026b920f470b3564cfd1

[solarkraft]

This is a big deal for me as I'm looking to utilize a component that will be static 95% of the time. Thus I would very much like to delay loading and hydration until it actually needs to spring into action.
It seems like such an elementary feature I'm a bit surprised it doesn't seem to be there (polished/well advertised/easy to use) yet, to be honest.