Code Splitting

Next.js splits code by route, segment, and component so the browser loads only what is needed.

Automatic splitting

• Chunks created per page.js, layout, and Client Component.
• Loaded only when navigating to the related route.

RSC impact

• Server Components never ship to the client bundle.
• Only Client Components and their deps are sent to the browser.

Dynamic imports

const Chart = dynamic(() => import("./Chart"), { ssr: false });

• Use to defer heavy components or browser-only libraries.

Route separation

• Segments, layouts, and parallel routes get isolated bundles.
• Transitions fetch only required chunks.

Advantages

• Smaller initial JS, faster hydration, efficient transitions.