React Server Components — If You're Using Next.js — React Tutorial

Everything so far in this course is Client-rendered React: components that run in the browser, hold state with useState, and respond to events. React Server Components (RSC) are a different rendering model worth knowing about, with one important caveat upfront: RSC is not something you get from react and react-dom alone. It requires a framework that implements the underlying bundler and server infrastructure — in practice, this almost always means Next.js's App Router. If you npm create vite@latest a plain React app, none of this applies to it.

The core idea

In a framework that supports them, Server Components run only on the server (or at build time) and never ship their code to the browser at all:

// A Server Component in Next.js's App Router — no directive needed, this is the default
async function ProductList() {
  const products = await db.query("SELECT * FROM products");
  return (
    <ul>
      {products.map((p) => <li key={p.id}>{p.name}</li>)}
    </ul>
  );
}

This component can be async and query a database directly, because none of that code — the query, the connection string, any secrets involved — is ever sent to the client. The browser only receives the rendered output.

Why this is a big enough shift to call out

Server Components can't use useState, useEffect, or any event handler — they have no presence in the browser, so there's nothing to hold state or respond to a click. For interactivity, you still write ordinary components exactly as covered throughout this course, marked with a "use client" directive so the framework knows to send them to the browser and hydrate them there. A typical page ends up as a mix: server-rendered components for data-heavy, static parts of the UI, and client components for anything interactive.

Why this course teaches plain React first

Everything in this course — components, props, state, hooks, events — is unconditionally correct in every React context: a plain Vite app, a Next.js Client Component, a React Native app. Server Components change where rendering happens and what's available while it does, but they don't change what a component or a hook fundamentally is. This course's separate Next.js course covers Server Components, the App Router, and this server/client split in depth — treat this lesson as a heads-up that the model exists, not a replacement for that fuller treatment.

The next, final lesson zooms out from React itself to compare it against another popular framework — Vue — to help place React's specific trade-offs in context.

The core idea

In a framework that supports them, Server Components run only on the server (or at build time) and never ship their code to the browser at all:

// A Server Component in Next.js's App Router — no directive needed, this is the default
async function ProductList() {
  const products = await db.query("SELECT * FROM products");
  return (
    <ul>
      {products.map((p) => <li key={p.id}>{p.name}</li>)}
    </ul>
  );
}

Why this is a big enough shift to call out

Why this course teaches plain React first

The next, final lesson zooms out from React itself to compare it against another popular framework — Vue — to help place React's specific trade-offs in context.