next-lazy-hydrate

Lazy load and hydrate component on demand. Deal with Nextjs performance without compromise

Screen.Recording.2022-06-06.at.08.23.09.mov

prog-rehy-5.mp4

Read more about Progressive Hydrate here

Install

npm install next-lazy-hydrate

Usage

import lazyHydrate from 'next-lazy-hydrate';

// Lazy hydrate when scroll into view
const WhyUs = lazyHydrate(() => import('../components/whyus'));

// Lazy hydrate when users hover into the view
const Footer = lazyHydrate(
  () => import('../components/footer', { on: ['hover'] })
);

const HomePage = () => {
  return (
    <div>
      <AboveTheFoldComponent />
      {/* ----The Fold---- */}
      <WhyUs />
      <Footer />
    </div>
  );
};

API

lazyHydrate(dynamicImport, options?)

dynamicImport

Type: () => Promise<React.ComponentType>

A function return import() in dynamic loading type

options

You can custom on to which event you’d like listen before hydrating start

Refer to: https://github.com/valcol/react-hydration-on-demand

postfix

Type: string Default: rainbows

Lorem ipsum.

GitHub

View Github