Next.js App Router: the patterns that matter in production

Server components run on the server and never hydrate on the client. They can be async, access databases directly, read environment variables, and import large dependencies without affecting bundle size. Client components are marked with "use client" and run on both server (for SSR) and client (for interactivity). The default in App Router is server — you opt into client. This is the opposite of Pages Router thinking.