progressive-hydration-component
v0.1.1
Published
Easily implement Progressive Hydration as React Component
Downloads
3
Maintainers
Readme
Progressive Hydration Component
Easily implement Progressive Hydration as React Component
Progressive Hydration?
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 doing this, the first execution of JavaScript when landed on client is reduced which result better performance then lazily re-hydrate the component which is intersected 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.
Benefit
- Greatly improve JavaScript Time To Interactive
- Kind of Lazy load interaction
- Perfectly work with pre-render
- Built for Next.js
- Preact support
- First class TypeScript
- Tiny bundle size
The downside
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.
Example
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.
import ProgressiveHydration, { removeEvent } from 'progressive-hydration-component'
import Button from 'components/button'
const Component = () => (
<ProgressiveHydration
// When in view, component is re-hydrate with event.
component={() => import('components/button')}
>
{/* Pre-render at built time, no JavaScript is executed during first load. */}
{removeEvent(Button)}
</ProgressiveHydration>
)