Server Side Rendering for a component and skip the hydration step on the client but, as soon as it appears on the viewport, then hydrate it. Useful for list of items.
npm install @midudev/react-progressive-hydrationServer Side Rendering for a component and skip the hydration step on the client but, as soon as it appears on the viewport, hydrate it. Useful for list of items or components that are not visible on the viewport but yet you need to render them for SEO.
- 👀 Only re-hydrate what's visible
- 🤳 Thus could greatly improve TTI
- 🔛 Activate interactivity on demand
)$3
- 📸 Kind of lazy loading experience
- 🤖 GoogleBot will get the rendered static html (not hydrated)How to use 👨🏫
Just wrap the components you want to be hydrated progressively.Use force prop in order to hydrate the component no matter if it's below the fold.
``javascript
import ProgressiveHydration from '@midudev/react-progressive-hydration'
export default function ProgressiveHydrationPage({articles}) {
return (
{articles.map((article, idx) => (
))}
)
}
``
Resources 🔗
The case of partial hydration (with Next and Preact)
Rendering on the Web: Performance Implications of Application Architecture
Hack for avoiding hydration