Next.js LTS cements the App Router and React Server Components as the default way to build modern web applications. The mental model is different from the pages-based approach many developers are used to, and it pays to understand the reasoning behind it.
Server Components by Default
In the App Router, every component is a server component unless explicitly marked otherwise. Server components render on the server and send only HTML and a small amount of serialized data to the browser, which means less JavaScript shipped and faster initial loads.
When to Reach for Client Components
- Anything using state, effects, or browser-only APIs
- Interactive elements like forms, dropdowns, and modals
- Components that rely on event listeners
The best pattern is to keep client components small and push them as far down the tree as possible, wrapping only the interactive piece rather than an entire page.
Streaming and Suspense
The App Router lets you stream parts of a page as they become ready instead of waiting for every data fetch to finish. Wrapping slow sections in Suspense boundaries means users see the fast parts of the page immediately while the rest loads in.
Data Fetching Simplified
Fetching data directly inside server components removes the need for a separate API layer for many use cases. Next.js automatically deduplicates identical fetch requests across a render, and built-in caching controls let you decide exactly how fresh each piece of data needs to be.
Migration Considerations
Moving an existing Pages Router application to the App Router is a significant undertaking and is usually best done incrementally, route by route, rather than as a single rewrite. Next.js supports both routers side by side during the transition.
