Lazy Loading

🔍 What Is It?

Lazy loading in Next.js has two mechanisms:

1. next/dynamic — lazy loads React components (equivalent to React.lazy + Suspense)
2. next/script — lazy loads third-party scripts with strategy control

`next/dynamic` options:

• →loading — component shown while the lazy component loads
• →ssr: false — only load in the browser (for browser-only libraries)
• →suspense: true — use Suspense instead of the loading prop

🎯 Why Do We Need It?

JavaScript is the most expensive resource on the web — it must be downloaded, parsed, and executed before it is useful. Large components (rich text editors, chart libraries, maps, video players) can add hundreds of KB to your initial bundle.

Lazy loading ensures users only download the code for components they actually see, dramatically improving:

• →Initial page load time
• →Time to Interactive (TTI)
• →Core Web Vitals scores

🏗️ What Happens in Real Projects?

Lazy loading candidates in a real app:

• →Rich text editor (TipTap, Quill) — only on edit pages
• →Chart library (Recharts, Chart.js) — only on analytics pages
• →Map component (Mapbox, Google Maps) — only on location pages
• →Video player — only when a video is in the viewport
• →PDF viewer — only when user opens a document
• →Emoji picker — only when user focuses a text input

⚙️ How It Works

Dynamic import flow:

1. User navigates to a page with a dynamically imported component
2. The page HTML loads immediately (the component is not in the initial bundle)
3. When the component is about to render, the browser fetches its JS chunk
4. The loading component is shown while the chunk downloads
5. The component renders once the chunk is loaded and executed

💻 Example

Dynamic Import Patterns — Lazy loading heavy components and third-party scripts.

import dynamic from 'next/dynamic';

// 1. Basic lazy load with loading state
const RichTextEditor = dynamic(
  () => import('@/components/RichTextEditor'),
  {
    loading: () => <div className="h-64 bg-gray-100 animate-pulse rounded" />,
  }
);

// 2. Browser-only component (no SSR)
// Use for: libraries that use window, document, or browser APIs
const MapComponent = dynamic(
  () => import('@/components/Map'),
  {
    ssr: false, // Only render in browser
    loading: () => <MapSkeleton />,
  }
);

// 3. Named export
const { AreaChart } = dynamic(
  () => import('recharts').then((mod) => ({ default: mod.AreaChart })),
  { ssr: false }
);

// 4. Conditional loading — only load when needed
export function DocumentViewer({ url }: { url: string }) {
  const [showPDF, setShowPDF] = useState(false);

  // PDFViewer only downloaded when user clicks "View PDF"
  const PDFViewer = dynamic(() => import('@/components/PDFViewer'), {
    loading: () => <p>Loading PDF viewer...</p>,
    ssr: false,
  });

  return (
    <div>
      <button onClick={() => setShowPDF(true)}>View PDF</button>
      {showPDF && <PDFViewer url={url} />}
    </div>
  );
}

🤔 Common Confusions

🚨 Common Production Issues

✅ Best Practices

🏛️ Architect's Note

💬 Frequently Asked Questions

🎯 Key Takeaways

🔗 Related Topics

🎯 Practice this topic in interviews

↗ Where this topic fits