Next.js › Bundle Analysis & Code Splitting

How does route based code splitting interact with shared layouts in the App Router?

Advanced

Answer

Layouts that wrap multiple routes are loaded once and reused across navigations within that layout, while each individual page's specific code is fetched separately when the user navigates to it, so shared navigation or sidebar code does not need to reload on every page change.

// app/dashboard/layout.js loads once
// app/dashboard/page.js and app/dashboard/settings/page.js
// load separately as the user navigates between them

Real-world example A dashboard with a persistent sidebar keeps that sidebar loaded across every dashboard page the user visits, while only fetching the new page specific content, making navigation feel instant.

Common follow-ups: Does the layout re-render every time you navigate to a new nested page?;How does this affect the amount of data fetched on each navigation?

Layouts & Templates;Routing (App/Pages Router)