react-lazy-hydrate

Welcome to react-lazy-hydrate 👋

yarn add react-lazy-hydrate

React component to do progressive/partial hydration.

The objective of this component is to delay the hydration on client side from SSR applications, in order to increase TTI performance until this is natively supported by react (not to lazy load a component).

🕹️ Playground

Props

• children* (Component): Element to be progressive/partially hydrated (mandatory)
• isStatic (boolean): If the element is static, avoid hydration. NOTE This will only work with SSR.
• wrapperComponent (String/Component): Wrapper component. Its section by default
• wrapperComponentProps (Object): Wrapper component properties
• onHydrationRender (Function): Callback to be executed on hydration render

Usage

Progressive hydration

Progressive hydration is achieved by delaying the hydration when the web application goes into idle mode, but it has an intersection observer that if the component is visible by the user, then it hydrates the component immediately (urgent).

  import ReactLazyHydrate from 'react-lazy-hydrate';
 
  const ScrollToComponent = () => (
    <ReactLazyHydrate>
      <Component />
    </ReactLazyHydrate>
  );

Partial hydration (SSR only)

If the user has a static content that is rendered on server side and it does not change on client side no matter what the user does, and it does not have any js animations/interactions, like text, then there is no need to hydrate the component, for that you should add the prop isStatic.

NOTE: This does not remove the child component from the virtual DOM!

  import ReactLazyHydrate from 'react-lazy-hydrate';
 
  const StaticComponent = () => (
    <ReactLazyHydrate isStatic>
      <Component />
    </ReactLazyHydrate>
  );

Examples

  import ReactLazyHydrate from 'react-lazy-hydrate';
 
  const ScrollToComponent = () => (
    <ReactLazyHydrate 
      wrapperComponent="div" 
      wrapperComponentProps={{ id: 'lazyWrapperId' }} 
      onHydrationRender={() => console.log('Going to hydrate!!')}
    >
      <Component />
    </ReactLazyHydrate>
  );

Install

yarn install

Build

yarn build

TODO

• Add unit tests
• Upgrade to typescript

Author

👤 KennyPT [e-mail]

• Github: @kennypt

Show your support

Give a ⭐️ if this project helped you!