PerformanceLazy Loading

Lazy Loading Demo

Heavy components are loaded on-demand using Next.js dynamic imports, reducing the initial bundle size and improving page load performance.

How Dynamic Imports Work

Code Splitting

Heavy components are split into separate chunks

On-Demand Loading

Components load only when needed

Loading States

Show fallback UI while loading

Lazy Loaded Chart Component

This chart component is loaded dynamically. Click the button to load it. Open your browser's Network tab to see the chunk being loaded.

Lazy Loaded Modal

The Modal component is also lazy loaded. It won't be included in the initial bundle and will only load when you open it.

Code Example

import dynamic from "next/dynamic";

// Lazy load a heavy component
const HeavyChart = dynamic(() => import("@/components/HeavyChart"), {
  loading: () => <LoadingSpinner />,
  ssr: false, // Disable server-side rendering if needed
});

// Use React.lazy with Suspense (alternative)
const LazyComponent = React.lazy(() => import("./Component"));

function Page() {
  const [show, setShow] = useState(false);
  
  return (
    <>
      <button onClick={() => setShow(true)}>Load</button>
      {show && (
        <Suspense fallback={<Loading />}>
          <HeavyChart />
        </Suspense>
      )}
    </>
  );
}