Tendril
Loading lesson…
RSCs render on the server and stream HTML to the client. Zero-JS components, free data fetching. Learn the boundary rules.
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.
// 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> ); }Fetching directly in the component. No loading state, no useEffect. Server does the work.// 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> ); }`use client` at the top opts in to state and event handlers. Props still flow in from the server.The big idea: fetch on the server, interact on the client, and respect the serialization boundary. Most components should stay on the server.
6 questions · take it digitally for instant feedback at tendril.neural-forge.io/learn/quiz/end-progx-rsc-creators
What is the main idea of "React Server Components"?
Which concept is most central to "React Server Components"?
What should a careful learner remember about "Props crossing the boundary must be serializable"?
You want to use AI after this lesson. What is the safest next step?
How should AI output about RSC be treated?
Name one way to verify an AI answer about RSC.