YOUTUBECaptions: English
How React Server Components Work
by Example Channel42:18
YouTube player
Server Components render on the server, and their code never ships to the client.
08:42 / 42:18What runs on the server
Summary
A walkthrough of how React Server Components render on the server, what the browser actually receives, and how they compose with interactive client components.
KEY TAKEAWAYS
- Server Components render on the server; their code never reaches the browser.
- The client receives a rendered description of the UI, not the component.
- Only interactive parts add to the JavaScript bundle.
Chapters
Transcript
SPEAKER 1Welcome to today’s video. We’re going to take React Server Components apart, piece by piece.
SPEAKER 1Today we’re going to discuss what runs on the server, what reaches the browser, and why that matters.
SPEAKER 1The first important concept is that not every component needs to be interactive.
SPEAKER 1Let’s look at an example — a product page with a list that never changes on the client.
SPEAKER 1Server Components render on the server, and their code never ships to the client.
SPEAKER 1What the browser receives is the rendered result — a description of the UI — not the component itself.
SPEAKER 1Here’s where people get confused: a Server Component can’t use state or effects.
SPEAKER 1So your bundle only carries the parts that actually need interactivity.
SPEAKER 2A question from the audience: can a Server Component import a Client Component?
SPEAKER 1Yes — and that’s the main way you compose the two.