React Academy · Lesson

React Server Components Explained

Understand what RSCs are, how they differ from client components, and when to use each.

React Server Components Explained is a free React Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Welcome

In this lesson you will learn what React Server Components (RSCs) are, how they differ from client components, and when to use each type.

The Two Component Worlds

React 19 and Next.js App Router split components into two worlds: **Server Components** (render on the server, no interactivity) and **Client Components** (render on both server and client, have state and event handlers).

Server Components by Default

In the Next.js App Router, every component is a Server Component by default. You opt into Client Component mode by adding 'use client' at the top of the file.

// Server Component (default, no directive needed)
export default async function Page() {
  const data = await fetch('/api/posts').then(r => r.json());
  return <ul>{data.map(p => <li key={p.id}>{p.title}</li>)}</ul>;
}

Client Components

Add 'use client' at the top of a file to make it a Client Component. Client Components can use useState, useEffect, event handlers, and browser APIs.

'use client';
import { useState } from 'react';

export function Counter() {
  const [n, setN] = useState(0);
  return <button onClick={() => setN(n+1)}>{n}</button>;
}

Server Component Capabilities

Server Components can: await database queries, read the filesystem, access environment secrets, import large server-only packages, and render without any JavaScript sent to the client.

// Fetch from DB directly in the component!
import { db } from '@/lib/db';

export default async function UserList() {
  const users = await db.select().from(usersTable);
  return <ul>{users.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}

Server Component Limitations

Server Components CANNOT: use useState, useEffect, event handlers (onClick, etc.), browser APIs (window, localStorage), or Context. These require 'use client'.

Composing Server and Client Components

The common pattern: a Server Component fetches data and passes it to a Client Component as props. The server handles data; the client handles interaction.

// Server Component
export default async function Page() {
  const user = await getUser();
  return <ProfileEditor user={user} />; // client component
}

// Client Component (separate file)
'use client';
export function ProfileEditor({ user }) {
  const [name, setName] = useState(user.name);
  return <input value={name} onChange={e => setName(e.target.value)} />;
}

The Client Boundary Rule

Once you mark a file 'use client', all its imported components are also treated as client components. The boundary between server and client runs at the file level.

Zero JavaScript for Server Components

Server Components render to HTML on the server. Their component code is NEVER sent to the browser. This reduces the JavaScript bundle size significantly.

Server Components vs SSR

Traditional SSR renders a full page to HTML but sends all component code to the client for hydration. Server Components never send their code to the client at all — only their rendered output.

Quick Check

What directive do you add to a file to make it a React Client Component in Next.js App Router?

Recap

Server Components run on the server, can access databases and secrets, and send no JS to the client. Client Components add 'use client' and support state, effects, and event handlers. Compose them: server fetches, client interacts.

Up Next

Next lesson: **The use() Hook for Async Resources** — you will read promises and context in render with the React 19 use() hook.

Frequently asked questions

Is the “React Server Components Explained” lesson free?

Yes — the full text of “React Server Components Explained” is free to read here on the web, and the React Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.

What will I learn in “React Server Components Explained”?

Understand what RSCs are, how they differ from client components, and when to use each. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start React Academy?

No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “React Server Components Explained” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this React Academy lesson?

Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to React Academy