Next.js App Router patterns for production applications

The App Router represents a fundamental shift in how React applications are structured — Server Components and streaming change not just the API but the mental model required for effective Next.js development.

Server Components are the default in the App Router. They run on the server, can access databases and APIs directly, and never ship their code to the browser. The common mistake is adding 'use client' unnecessarily — most components should stay on the server unless they need interactivity.

Data fetching in Server Components eliminates useEffect-based data loading. fetch() calls in Server Components are automatically deduplicated across a request, cached, and can be revalidated with revalidatePath or time-based revalidation.

Suspense boundaries enable streaming and granular loading states. Wrap independently-loading sections in Suspense with lightweight fallback UI — users see the page shell immediately while data loads in parallel, rather than waiting for the slowest data fetch.

Error boundaries in the App Router use error.tsx files at the route level. Pair error boundaries with Sentry integration for automatic error capture with full context — route, user, and request parameters included.

The largest production pitfall: forgetting that Client Components still render on the server for the initial HTML. 'use client' means the component also runs in the browser, not that it skips server rendering.