LearnAI ToolsCareerPractice BuildsPlayContact
Lesson 2120 min read

Server Components

Understand React Server Components — the default component type in the App Router — and why they change how you build UI.

What Is a Server Component?

A Server Component is a React component that renders entirely on the server. It never ships its own JavaScript to the browser — only the HTML (and data) it produces is sent. In the App Router, every component is a Server Component by default, unless it opts out with "use client".

The Biggest Mental Shift

Coming from plain React, every component you've written ran in the browser. In the App Router, the default flips: components run on the server unless you explicitly say otherwise.

Why They Exist

Traditional client-rendered React ships the JavaScript for every component to the browser, even components that never touch state or interactivity — a component that just formats and displays server data still costs bundle size and execution time on every visitor's device.

Server Components remove that cost for anything that doesn't need interactivity: they run once, on the server, and send only the resulting markup. Less JavaScript reaches the browser, so pages load and become interactive faster.

What Server Components Can Do

Fetch Data Directly

await a database query or API call right inside the component — no useEffect required.

Use Server-Only Secrets

Read environment variables like API keys safely — this code never reaches the browser.

Import Large Dependencies

Use a heavy library (e.g. a markdown parser) without adding a single byte to the client bundle.

Render Immediately

Their output streams to the browser as static HTML, with no client-side render pass required first.

// app/products/page.tsx — a Server Component (no "use client")
async function getProducts() {
  const res = await fetch('https://api.example.com/products');
  return res.json();
}


export default async function ProductsPage() {
  const products = await getProducts();


  return (
    <ul>
      {products.map(p => (
        <li key={p.id}>{p.name} — ${p.price}</li>
      ))}
    </ul>
  );
}

What Server Components Cannot Do

  • Use state — no useState, useReducer, or any client-side memory.
  • Use lifecycle/effect hooks — no useEffect, since there's no browser lifecycle to hook into.
  • Attach event handlers — no onClick, onChange, etc. (there's no client-side JS running to handle them).
  • Access browser-only APIs — no window, document, or localStorage.
  • Use Context providers that rely on client state (though Server Components can be nested inside them).
Anything Interactive Needs a Client Component

The moment a component needs to respond to a click, hold local state, or use an effect, it must become a Client Component with "use client" — covered in full in the next lesson.

Real-World Analogy

Think of a restaurant kitchen (the server) and the dining room (the browser). A Server Component is a dish fully prepared in the kitchen and brought out ready to eat — the diner never needs to cook anything themselves. A Client Component is more like a build-your-own-taco station: the ingredients (JavaScript) have to be sent out to the table so the diner can interact with them.

Common Beginner Mistakes

Adding "use client" to every component out of habit

This throws away the entire benefit of Server Components — only mark a component client-side when it genuinely needs interactivity or browser APIs.

Trying to use useState in a Server Component

This throws a build error — Server Components have no client-side memory to hold state in.

FAQs

It depends on the rendering strategy for that route — they can run once at build time (static) or on every request (dynamic), which you'll cover in the rendering strategies lesson.

Yes — this is a very common and encouraged pattern, and it's covered in the composition patterns lesson.

Summary

Server Components are the default in the App Router, run only on the server, and ship zero JavaScript to the browser for the parts of your UI that don't need it. Next, you'll see their counterpart: Client Components.

Next Lesson →

Client Components