What are Server Components and why are they a big deal in Next.js?

React Server Components (RSC) are components that render exclusively on the server. They never run on the client, meaning their code isn't included in the JavaScript bundle sent to the browser. Next.js's App Router uses Server Components by default.

Benefits include: reduced bundle size (server-only code and dependencies stay server-side), direct backend access (you can query databases, read files, access internal services directly), automatic code splitting, and improved initial page load performance.

Server Components can be async functions that directly await data: async function UserProfile({ id }) { const user = await db.users.find(id); return <div>{user.name}</div>; }

You cannot use hooks (useState, useEffect), browser APIs, or event handlers in Server Components—these require client-side JavaScript. When you need interactivity, you create a Client Component by adding 'use client' at the top of the file.

The pattern is to keep Server Components as the default and create Client Components only for interactive parts. You can compose them: a Server Component can import and render Client Components, passing server-fetched data as props. Client Components cannot import Server Components directly but can receive them as children.

This mental model shift—defaulting to server rendering and explicitly opting into client—is key to building performant Next.js applications.