Progressive Hydration Component
Easily implement Progressive Hydration as React Component
Progressive Hydration is a term introduced at Google I/O 2019 by the concept to balance between client and server for the best performance.
By hydrate top priority component on server and then re-hydrate lesser priority component on the client.
By implementing this strategy, the Time To Interactive is greatly improved, since only visible and top priority component is the only to be interactable while the other is active when need.
- Kind of Lazy load interaction
- Perfectly work with pre-render
- Built for Next.js
- Preact support
- First class TypeScript
- Tiny bundle size
To rehydrate the component, the extra wrapper is introduced to use
ReactDOM.rehydrate which result an extra auto-generated
<div> as a wrapper for
progressive hydrated component.
Progressive Hydration Component is imported as a React Component and introduced an extra
removeEvent function to remove event from any React Component for pre-rendering and to be rehydrated later.