Try it out!

next-lazy-hydration-on-scroll

Optimize your Next.js application performance by lazy hydrating components only when they enter the viewport.

Press F12 to open Network tab

Scroll to see how it works

Ready

Static Import (executed instantly)

This component loads immediately with the page and is always interactive. Perfect for above-the-fold content that needs immediate interaction.

Ready

Dynamic Import (next/dynamic)

While dynamically imported, this component's JavaScript starts loading immediately after page load (not on-demand), contrary to common misconception. Dynamic imports only load conditionally when used with conditional rendering.

Ready

Prerendered + Executed on scroll

This component is pre-rendered on the server and its JavaScript is only loaded when scrolled into view. Unlike Component2's immediate loading after page load, this truly loads on-demand using intersection observer.