next-lazy-hydration-on-scroll

A simple yet powerful hydration controller for Next.js.
Improve TBT/INP by delaying loading & hydration of non-critical components.

View on GitHubInstall Package
Open browser console with Ctrl + Shift + J to see hydration events

Static Import

Component is loaded and hydrated immediately during page load, providing immediate interactivity.

Not Hydrated
import Component from '../components/Component';

export default function Page() {
  return (
    <div>
      <Component />
    </div>
  );
}

Dynamic Import

Component is loaded separately from the main bundle.

Not Hydrated
import dynamic from 'next/dynamic';

const Component = dynamic(() => import('../components/Component'));

export default function Page() {
  return (
    <div>
      <Component />
    </div>
  );
}

Dynamic Import & Delayed Hydration
(next-lazy-hydration-on-scroll)

Component is rendered on the server but only loads and hydrates when enters the viewport.

Not Hydrated
import { lazyHydrate } from 'next-lazy-hydration-on-scroll';

const Component = lazyHydrate(() => import('../components/Component'));

export default function Page() {
  return (
    <div>
      <Component />
    </div>
  );
}