React Server Components represent a fundamental shift in how we think about rendering in React. Instead of sending all your component code to the browser, Server Components run exclusively on the server, sending only the rendered output to the client.
Why Server Components?
Traditional React apps send everything — components, state logic, effects — to the browser. Server Components let you keep data fetching, database access, and backend logic on the server. The result: less JavaScript shipped, faster page loads, and better performance on slow networks.
Server vs. Client Components
By default, all components in the Next.js App Router are Server Components. When you need interactivity — event handlers, state, effects — you add the "use client" directive at the top of the file to mark it as a Client Component.
// Server Component (default)
export default function Page() {
const data = await fetchFromDB();
return <Article data={data} />;
}
// Client Component
"use client";
export default function Counter() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}Key Benefits
- Reduced bundle size — Server Components never send their code to the client.
- Direct backend access — Query databases and APIs without exposing credentials.
- Automatic code splitting — Only Client Components are bundled for the browser.
- Streaming — The server can stream rendered HTML as it becomes ready.