Nunjucks Powers Mozilla

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

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

    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>
    )
    Note: This example is tested with Next.js

    Resources

    Install

    npm i progresive-hydration-component

    DownloadsWeekly Downloads

    11

    Version

    0.1.0

    License

    MIT

    Unpacked Size

    39.2 kB

    Total Files

    38

    Last publish

    Collaborators

    • aomkirby123