Navigation & Partial Updates

See how layouts persist while content streams in

How This Works
Layout (this component)

Rendered once and stays mounted. Contains the navigation tabs and shared UI.

Navigation Tabs

Client Component that handles route changes. Stays interactive during content loading.

Page Content (below)

Server Component that fetches new data. Only this part re-renders and streams.

💡 Partial Rendering

When you navigate between pages, Next.js only re-renders the parts that changed (the page content), while keeping shared layouts mounted. This makes navigation feel instant and preserves client state in the layout.

Client Component Navigation

This nav stays mounted while content below streams in

Click a Pokémon above to see partial rendering in action