Nickelback Plays Music

    TypeScript icon, indicating that this package has built-in type declarations

    0.1.1 • Public • Published

    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.


    • 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.


    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 = () => (
            // 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. */}
    Note: This example is tested with Next.js



    npm i progressive-hydration-component

    DownloadsWeekly Downloads






    Unpacked Size

    38.7 kB

    Total Files


    Last publish


    • aomkirby123