Package Exports
- next-lazy-hydrate
- next-lazy-hydrate/lib/index.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (next-lazy-hydrate) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
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 |
https://user-images.githubusercontent.com/9281080/172079813-a49db8c0-c64d-4589-941d-bf027b22433a.mov
https://user-images.githubusercontent.com/9281080/172057438-4a3fed9c-b232-4d95-b1e4-e968910df667.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#options
postfix
Type: string
Default: rainbows
Lorem ipsum.