A mini RSC: server components, client holes and the payload
A teaching model, not the real RSC format: toPayload plays the server (it awaits async components and leaves a client hole with props for each client component) and fromPayload plays the browser. Notice Post and Comments never appear in the payload, only their output, and Comments ran on the server even though the collapsible starts closed.
React Server Components run only on the server (at build time or per request), can be async and read data directly, and send their result to the browser instead of their code; "use client" marks where client components, which have state and event handlers, begin.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
A product page shows a description (Markdown converted with a 50 KB library), a price and an "Add to cart" button with a quantity picker. Decide which parts are server and which are client components, and write the client one.
Rewrite this to obey the boundary rules: a server component renders <SortableTable rows={rows} onSort={(col) => rows.sort(...)} />.
Explain it without notes
What is a React Server Component and what can it do that a client component can't?
What does "use client" do exactly? Where do you put it?
Which props can a server component pass to a client component, and why are functions not allowed?
How can a client component show content rendered by a server component?
What are the benefits and costs of Server Components?
Preview
Console
Nothing logged yet.Expected console output
{"tag":"article","children":[{"tag":"h2","children":"Hello RSC"},{"client":"LikeButton","props":{"likes":3}},{"client":"Collapsible","props":{"title":"comments"},"children":{"tag":"ul","children":[{"tag":"li","children":"Nice!"},{"tag":"li","children":"Thanks"}]}}]}