What Are React Server Components?
Learn what React Server Components are, how they differ from Client Components, and how the RSC payload streaming model works.
Expected Interview Answer
React Server Components (RSC) are components that render exclusively on the server, ship zero JavaScript to the browser, and can read data or the filesystem directly, while ordinary Client Components still hydrate and run in the browser for interactivity.
In an RSC-enabled tree, the server renders Server Components to a special serialized payload (not HTML strings, but a description of the tree including any nested Client Components) and streams it to the client. Because Server Components never run in the browser, their imports, dependencies, and data-fetching code are excluded entirely from the client bundle, which shrinks the JavaScript the browser must download and parse. Server Components can await data directly inside the component body using async/await, without a loading state or a useEffect, since the fetch happens before any bytes reach the client. Client Components, marked with the “use client” directive, are still needed for anything requiring state, effects, or browser APIs like event handlers, and Server Components can pass serializable props into them, but a Client Component cannot import a Server Component directly — it can only receive one as a children prop.
- Zero client-side JavaScript for components that never need interactivity
- Direct, secure access to databases or the filesystem from within the component
- Smaller client bundles improve time-to-interactive and parse cost
- Automatic code-splitting between server-only and client-only logic
AI Mentor Explanation
A Server Component is like the ground staff preparing the pitch report before the match — they gather soil data, weather readings, and historical scores entirely behind the scenes, and only the finished report reaches the commentary box. The commentators (the browser) never need the soil-testing equipment or the raw weather feed; they just receive the polished summary. A Client Component is like the on-field umpire who must react live to each ball, needing real tools present at the ground. That split — heavy data gathering done once off-site versus live reactive tools on-site — is exactly how React separates server-only rendering from interactive client code.
Step-by-Step Explanation
Step 1
Server renders the tree
The server executes Server Components, including any async data fetching, and produces a serialized RSC payload describing the UI.
Step 2
Payload streams to the client
The payload streams progressively, referencing Client Component boundaries by module ID rather than inlining their code.
Step 3
Client hydrates boundaries
The browser downloads only the JS for Client Components referenced in the payload and hydrates just those parts.
Step 4
Interactivity attaches
Event handlers and state only activate within Client Component boundaries; Server Component output remains static markup.
What Interviewer Expects
- Clear distinction between Server Components (zero client JS) and Client Components (hydrated, interactive)
- Understanding that Server Components can use async/await directly for data fetching
- Awareness that a Client Component cannot import a Server Component directly, only receive it as children
- Mention of the serialized RSC payload streaming model, not just SSR-to-HTML
Common Mistakes
- Confusing Server Components with traditional server-side rendering (SSR) of the whole app to HTML
- Assuming Server Components can use useState or useEffect
- Claiming a Client Component can freely import and render a Server Component inline
- Forgetting that props passed from Server to Client Components must be serializable
Best Answer (HR Friendly)
“React Server Components let part of the UI run entirely on the server, so the browser never has to download the code for it, which makes pages lighter and faster. Only the pieces that actually need to react to clicks or state live in the browser, and the framework wires the two together automatically.”
Code Example
// app/products/[id]/page.tsx (Server Component by default, no directive needed)
import { LikeButton } from './LikeButton'
export default async function ProductPage({ params }: { params: { id: string } }) {
const product = await db.product.findUnique({ where: { id: params.id } })
return (
<article>
<h1>{product.name}</h1>
<p>{product.description}</p>
{/* Client Component boundary receives serializable props only */}
<LikeButton productId={product.id} initialLikes={product.likes} />
</article>
)
}
// app/products/[id]/LikeButton.tsx
'use client'
import { useState } from 'react'
export function LikeButton({ productId, initialLikes }: { productId: string; initialLikes: number }) {
const [likes, setLikes] = useState(initialLikes)
return <button onClick={() => setLikes(likes + 1)}>Likes: {likes}</button>
}Follow-up Questions
- How does the RSC payload differ from a plain server-rendered HTML string?
- Why can’t a Client Component import a Server Component directly?
- What restrictions apply to props passed from a Server Component to a Client Component?
- How do Server Components interact with Suspense and streaming?
MCQ Practice
1. What is a key benefit of React Server Components?
Server Components execute only on the server, so their code never ships to the browser bundle.
2. How can a Server Component render a Client Component?
Server Components can render Client Components directly and pass down serializable props.
3. What directive marks a file as a Client Component?
The “use client” directive at the top of a file marks its exports as Client Components.
Flash Cards
What is a Server Component? — A component that renders only on the server and ships zero JS to the browser.
How do Server Components fetch data? — Directly with async/await in the component body, no useEffect needed.
Can a Client Component import a Server Component? — No — it can only receive one passed in as children/props from a parent Server Component.
What marks a Client Component? — The “use client” directive at the top of the file.