next-lazy-hydrate
Lazy load and hydrate component on demand. Deal with Nextjs performance without compromise
Before | After |
---|---|
https://next-lazy-hydrate-origin.vercel.app/ | https://next-lazy-hydrate-optimized.vercel.app/ |
Live check PageSpeed | Live check PageSpeed |
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.