Next.js Lazy Loading

Expert guidance on lazy loading in Next.js — next/dynamic, React.lazy, code splitting, SSR skip, external libraries, and magic comments.

@doc-version: 16.2.6

Core Concepts

Lazy loading ลด JavaScript ที่ต้องโหลดตอนแรก — defer loading Client Components และ libraries จนกว่าจะต้องใช้จริง

2 วิธี:

1. next/dynamic — composite ของ React.lazy() + Suspense
2. React.lazy() + Suspense — React native API

Server Components ถูก code split อัตโนมัติ + ใช้ streaming — lazy loading ใช้กับ Client Components เท่านั้น

Guidelines

1. Dynamic Import Client Components