Layouts preserve state and remain interactive during navigation, while Templates create a new instance for every child on navigation.
Interactive Simulation Engine
Layout vs Template
State preservation during navigation
Persistent Boundary (Layout)
Internal State
0"I stay mounted. My state survives navigation."
Resetting Boundary (Template)
Internal State
0"I unmount and remount on every navigation."
Simulation: Increment both counters, then switch tabs. Notice how theLayout preserves its number, while theTemplate resets to zero.
Executable Code Workbench
page.tsx
Live Code Editor1// layout.tsx - Preserves state
2export default function Layout({ children }) {
3 return <main>{children}</main>
4}
5
6// template.tsx - Resets state
7export default function Template({ children }) {
8 return <div className="animate-in">{children}</div>
9}Mental Model
Layouts are 'sticky' UI (persistent). Templates are 'fresh' UI (resetting every time).
Why This Exists
To provide a choice between performance (layouts) and resetting state/animations (templates) when navigating between routes.
Critical Note
"Developers often confuse this pattern with traditional client React. Use the Live Code Workbench above to simulate execution."