Next.js Rendering

Render React components on the server with zero client-side JavaScript -- the default in Next.js App Router.

Add interactivity with "use client" -- hooks, event handlers, and browser APIs.

Mix Server and Client Components effectively using the children pattern, slots, and boundary-aware architecture.

Understand when Next.js renders routes at build time (static) versus request time (dynamic), and how to control it.

Serve a static shell instantly and stream dynamic content into Suspense holes -- the best of static and dynamic rendering.

Serve optimized, responsive images with next/image -- automatic format conversion, lazy loading, and size hints.

Self-host and optimize web fonts with next/font -- zero layout shift, no external network requests, automatic subsetting.

A condensed summary of the 25 most important best practices drawn from every page in this section.