Hydrate components dynamically as the user scrolls.
npm install next-lazy-hydration-on-scrollā ļø Pages Directory Only - For Next.js App Directory better use built-in streaming.
Optimize Next.js app performance by lazy loading and hydrating components when they enter the viewport.
- ā”ļø Lower Total Blocking Time (TBT)
- š¦ Smaller Bundle Size
- š Improved Performance
``bash`
npm install next-lazy-hydration-on-scrollor
yarn add next-lazy-hydration-on-scrollor
pnpm add next-lazy-hydration-on-scroll
`tsx
import { lazyHydrate } from 'next-lazy-hydration-on-scroll'
const LazyComponent = lazyHydrate(() => import('./components/HeavyComponent'), {
LoadingComponent: () =>
export default function Page() {
return (
Options
| Option | Type | Default | Description |
| ------------------ | ----------------------------- | ------------- | ------------------------------------------------------- |
|
| string | '0px 250px' | Margin around the root element for IntersectionObserver |
| LoadingComponent | ComponentType | undefined | Component to show while loading |
| wrapperElement | keyof JSX.IntrinsicElements | 'section' | HTML element to wrap the component |Component Props
| Prop | Type | Description |
| -------------- | --------------------- | ------------------------------------ |
|
wrapperProps | Record | Props to pass to the wrapper element |How It Works
1. Server renders full HTML content
2. Components remain static until scrolled into view
3. When component enters viewport:
- JavaScript is loaded
- Component is hydrated
- Interactivity is enabled
Implementation Requirements
- Keep components in separate files
- Avoid barrel files (index.ts that re-exports components)
- Import components directly:
`tsx
// ā
Correct
import { ComponentA } from './components/ComponentA'// ā Avoid
// components/index.ts with re-exports
`Browser Support
Works in all modern browsers supporting IntersectionObserver (IE11+ with polyfill).
Notes
- SEO friendly - content is pre-rendered
- Components are wrapped in customizable elements (default:
) for stable viewport detection
- Works with Next.js 12 and aboveFAQ
$3
A: No - all content is pre-rendered and visible to search engines.
$3
A: All modern browsers (IE11+ with polyfill).
$3
A: For two reasons: to provide a stable element for IntersectionObserver tracking, and to handle hydration mismatches with
suppressHydrationWarning.$3
A: Yes - use the
wrapperElement option to specify any valid HTML element (e.g., 'div', 'article') and pass props to it using the wrapperProps` prop.A: It prevents React from hydrating down the component tree, allowing to preserve server-rendered content while controlling when hydration occurs.