⚠️ 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

npm install next-lazy-hydration-on-scroll
# or
yarn add next-lazy-hydration-on-scroll
# or
pnpm add next-lazy-hydration-on-scroll

import { lazyHydrate } from 'next-lazy-hydration-on-scroll'
const LazyComponent = lazyHydrate(() => import('./components/HeavyComponent'), {
 LoadingComponent: () => <div>Loading...</div>, // Optional
 wrapperElement: 'div', // Optional, defaults to 'section'
})
export default function Page() {
 return (
 <div>
 <header>Always hydrated</header>
 <LazyComponent wrapperProps={{ className: 'my-wrapper', id: 'lazy-component' }} /> {/* Hydrates when scrolled into view */}
 </div>
 )
}

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

• Keep components in separate files
• Avoid barrel files (index.ts that re-exports components)
• Import components directly:

// ✅ Correct
import { ComponentA } from './components/ComponentA'
// ❌ Avoid
// components/index.ts with re-exports

Works in all modern browsers supporting IntersectionObserver (IE11+ with polyfill).

• SEO friendly - content is pre-rendered
• Components are wrapped in customizable elements (default: <section>) for stable viewport detection
• Works with Next.js 12 and above

A: No - all content is pre-rendered and visible to search engines.

A: All modern browsers (IE11+ with polyfill).

A: For two reasons: to provide a stable element for IntersectionObserver tracking, and to handle hydration mismatches with suppressHydrationWarning.

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.

View Demo | GitHub Repository