JSPM

next-lazy-hydrate

1.0.2
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 1167
  • Score
    100M100P100Q113164F
  • License MIT

A template for creating npm packages using TypeScript and VSCode

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

npm package Build Status Downloads Issues Semantic Release

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

Before After
Screen Shot 2022-06-05 at 22 31 29 Screen Shot 2022-06-05 at 22 31 19
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.