What's the difference between client and server components in React?

React Server Components (RSC) represent a fundamental shift in how we think about React applications, especially in frameworks like Next.js.

Server Components render entirely on the server. Their code never ships to the browser, so you can use server-only features (database queries, file system, secrets) directly in the component. They produce HTML that streams to the client. You cannot use useState, useEffect, or any browser APIs.

Client Components are the traditional React components we've always written. They can use all React features including hooks, event handlers, and browser APIs. They're hydrated on the client, meaning JavaScript runs to make them interactive. Mark them with 'use client' at the top of the file.

The mental model: start with Server Components by default. When you need interactivity (clicking, typing, hovering, state changes), create a Client Component for just that piece. Server Components can import Client Components and pass them server-fetched data as props.

This pattern keeps most of your app on the server (smaller bundles, direct data access) while enabling rich interactivity where needed. It's not about choosing one or the other—it's about composing them effectively.