How does the App Router handle layout re-rendering — does a layout re-render when its child route changes?

No — layouts in the App Router do NOT re-render when their child route changes. This is one of the most important performance advantages of the App Router over the Pages Router. Layouts are preserved across navigations, meaning only the part of the UI that actually changed is re-rendered.

In the Pages Router, every route change caused the entire page — including shared UI like headers, sidebars and navbars — to unmount and remount. The App Router solves this with Partial Rendering. When you navigate between routes that share a layout, only the segment below the shared layout re-renders. The layout itself stays mounted, preserving its state, scroll position, and avoiding unnecessary re-fetches.

How Partial Rendering Works

1
Next.js identifies the shared layout between the current and target route
2
Only the route segments below the shared layout are re-rendered
3
The shared layout stays mounted — it is NOT unmounted and remounted
4
Layout state (useState, scroll position, form input) is preserved across navigations
5
Layout data fetching does NOT re-run on child route changes
6
React Server Components diffing ensures only changed segments are updated in the DOM

File Structure — Shared Layout with Child Routes

Layout Preservation in Action

Data Fetching in Layouts — Does NOT Re-run on Child Navigation

layout.jsx vs template.jsx — Key Difference

Forcing Layout Data to Refresh After Mutation

Nested Layouts — Each Level is Preserved Independently

Detecting Active Route in Layout Without Re-rendering

Pages Router vs App Router Layout Behavior

1
Pages Router — _app.jsx re-renders on EVERY route change including shared UI
2
Pages Router — no built-in nested layouts, must be manually implemented
3
Pages Router — layout state resets on every navigation
4
App Router — layouts are preserved across child route navigations
5
App Router — nested layouts each preserve independently at their own segment level
6
App Router — only the changed route segment re-renders (Partial Rendering)
7
App Router — layout data fetching does not re-run on child navigations

Key Takeaways

1
Layouts do NOT re-render when child routes change — this is by design for performance
2
Only the route segment that changed is re-rendered — called Partial Rendering
3
Layout state (useState, scroll, form values) is preserved across child navigations
4
Use template.jsx instead of layout.jsx when you explicitly need re-mount on every navigation
5
Layout data fetching runs once — use router.refresh() or revalidatePath() to update it after mutations
6
usePathname in a layout updates reactively without triggering a full layout re-render
7
Layouts re-render only when you enter or leave their own route segment — not their children