Tendril

Lesson 171 of 1596

React Server Components

RSCs render on the server and stream HTML to the client. Zero-JS components, free data fetching. Learn the boundary rules.

Creators · AI-Assisted Coding · ~27 min read

Print / PDF

Two Worlds, One Tree

Server Components fetch data and render HTML on the server. Client Components add interactivity. They can nest — a server component can import a client component as a child.

Fetching directly in the component. No loading state, no useEffect. Server does the work.

tsx

// app/feed/page.tsx — Server Component (no directive) import LikeButton from "./LikeButton"; async function getFeed() { const r = await fetch("https://api.example.com/feed", { cache: "no-store", }); if (!r.ok) throw new Error("feed failed"); return r.json() as Promise<{ id: string; text: string }[]>; } export default async function FeedPage() { const posts = await getFeed(); return ( <ul> {posts.map((p) => ( <li key={p.id}> {p.text} <LikeButton postId={p.id} /> </li> ))} </ul> ); }

`use client` at the top opts in to state and event handlers. Props still flow in from the server.

tsx

// app/feed/LikeButton.tsx — Client Component "use client"; import { useState } from "react"; export default function LikeButton({ postId }: { postId: string }) { const [liked, setLiked] = useState(false); return ( <button onClick={() => setLiked((v) => !v)}> {liked ? "♥" : "♡"} </button> ); }

Key terms in this lesson

The big idea: fetch on the server, interact on the client, and respect the serialization boundary. Most components should stay on the server.

End-of-lesson quiz

Check what stuck

6 questions · Score saves to your progress.

Tutor

Curious about “React Server Components”?

Ask anything about this lesson. I’ll answer using just what you’re reading — short, friendly, grounded.

Progress saved locally in this browser. Sign in to sync across devices.

Related lessons

React Server Components

Two Worlds, One Tree

Curious about “React Server Components”?

Keep going

React Server Components

Two Worlds, One Tree

Curious about “React Server Components”?

Keep going