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.
15 questions · take it digitally for instant feedback at tendril.neural-forge.io/learn/quiz/end-progx-rsc-creators
What is the core idea behind "React Server Components"?
Which term best describes a foundational idea in "React Server Components"?
A learner studying React Server Components would need to understand which concept?
Which of these is directly relevant to React Server Components?
What is the key insight about "Props crossing the boundary must be serializable" in the context of React Server Components?
What is the key insight about "Async client components are invalid" in the context of React Server Components?
Which statement accurately describes an aspect of React Server Components?
What does working with React Server Components typically involve?
Which best describes the scope of "React Server Components"?
Which of the following is a concept covered in React Server Components?
Which of the following is a concept covered in React Server Components?
Which of the following is a concept covered in React Server Components?
Which of the following is a concept covered in React Server Components?
Which of the following is a concept covered in React Server Components?
Which of the following is a concept covered in React Server Components?