Evaluate SSR and Hydration
mwood23 opened this issue · comments
Preact offers a hydrate API and given the reactive nature of props inside of Preact Island I think SSR would work. I'm not sure about how this works so if you have a use case for this functionality please let me know!
This was the first question I had, so thank you for posing it! What are your thoughts on implementing this? I was considering Astro, but a Preact-native way to do it would be a more natural addition to our existing codebase. Curious of your thoughts.
@mangs Could you describe your use a case little more for SSR? The lib has primarily been used for widgets that render on the client via a <script> tag. I'd like to know more about how SSR widgets would help before thinking about the API too much. It is something I'm interested in supporting, just not as familiar with the space and problems it would solve.
Sure. Using Preact to do SSR rendering of the full HTML of the page, then doing partial hydration to give interactivity only to the "islands" that need it in order to reduce Time to Interactive. Ideally, using either IntersectionObserver or requestIdleCallback to trigger the execution of the hydration.
The nice thing that Astro does is strip out the unneeded JS from the bundle which may be out of the scope of this library (which is fine). I'm just laying out my full thoughts.
What preact-island could pretty easily support is a marker that determines whether island.render() actually renders or instead hydrates. We did something along these lines for preact-iso.
I'd still leave prerendering/SSR fully up to consumers to figure out (lot of valid ways to consume widgets, really build tooling dependent though), but, if they can add a marker when they SSR, preact-island could go with a much cheaper hydrate() instead of a full rerender of the component.