What are React Server Components?
Learn what React Server Components are, how they run on the server with zero client JS, differ from SSR, and compose with Client Components and Suspense.
Expected Interview Answer
React Server Components (RSCs) are components that run only on the server, render to a serialized description of UI that is streamed to the client, and never ship their own JavaScript to the browser — letting you access backend resources directly while keeping the client bundle small.
An RSC executes on the server, where it can query a database, read files, or call internal services without exposing secrets, then emits an RSC payload the client uses to render output. Because their code stays on the server, RSCs add nothing to the JavaScript bundle. Interactivity still lives in Client Components marked with 'use client', which RSCs can render and pass serializable props to. RSCs cannot use state or effects and hooks like useState or useEffect; they compose with Client Components and Suspense to stream UI progressively.
- Zero client JavaScript for server-only components
- Direct, secure access to backend data sources
- Smaller bundles and faster time to interactive
- Automatic code-splitting at the component boundary
- Streams UI progressively with Suspense
AI Mentor Explanation
A Server Component is like the match analysis team back in the studio: they crunch full ball-by-ball databases and hand the broadcast a clean, finished graphic. The viewer never receives the raw database, only the polished result. Client Components are the on-field controls the viewer can actually touch and change from home.
Step-by-Step Explanation
Step 1
Render on the server
An RSC executes server-side and can directly query databases or call internal services.
Step 2
Emit an RSC payload
Instead of HTML-only, it produces a serialized UI description streamed to the client.
Step 3
Ship no component JS
The server component's own code never enters the browser bundle, shrinking client JavaScript.
Step 4
Compose with Client Components
Mark interactive parts with 'use client' and pass serializable props from the RSC.
Step 5
Stream with Suspense
Wrap slow subtrees in Suspense so ready UI streams first with a fallback for the rest.
What Interviewer Expects
- Clear distinction between Server and Client Components
- Understanding RSCs ship no client JavaScript
- Knowledge that RSCs cannot use state, effects, or browser APIs
- How data is fetched securely on the server
- How RSCs compose with Suspense and Client Components
Common Mistakes
- Confusing Server Components with server-side rendering
- Using useState or useEffect inside a Server Component
- Passing non-serializable props to a Client Component
- Thinking RSCs replace all Client Components
- Expecting browser-only APIs to work on the server
Best Answer (HR Friendly)
“React Server Components run on the server, fetch their data there, and send only the finished UI to the browser, so their code never bloats the download. Anything the user needs to click or type stays in Client Components, and the two work together to make pages fast and secure.”
Code Example
// app/dashboard/page.jsx — Server Component by default
import { db } from '@/lib/db'
import LikeButton from './LikeButton'
export default async function Dashboard() {
// Runs on the server; ships no JS for this query
const posts = await db.post.findMany()
return (
<section>
{posts.map((post) => (
<article key={post.id}>
<h2>{post.title}</h2>
<LikeButton postId={post.id} initialLikes={post.likes} />
</article>
))}
</section>
)
}'use client'
import { useState } from 'react'
export default function LikeButton({ postId, initialLikes }) {
const [likes, setLikes] = useState(initialLikes)
return (
<button onClick={() => setLikes((n) => n + 1)}>
♥ {likes}
</button>
)
}Follow-up Questions
- How do Server Components differ from SSR?
- Why can't Server Components use useState or useEffect?
- What props can you pass from a Server to a Client Component?
- How does the RSC payload differ from plain HTML?
- How do Suspense boundaries enable streaming with RSCs?
MCQ Practice
1. What does a React Server Component send to the client?
RSCs render on the server and stream a serialized UI payload; their own code never ships to the browser bundle.
2. Which hook is NOT allowed inside a Server Component?
Server Components have no client runtime, so state and effect hooks like useState and useEffect can only be used in Client Components.
3. How do you make a component interactive alongside RSCs?
The 'use client' directive marks a Client Component, which can use state, effects, and browser events while RSCs stay server-only.
Flash Cards
What is a React Server Component? — A component that runs only on the server and ships no JavaScript to the browser.
Can an RSC use useState? — No — state and effect hooks require a Client Component marked with 'use client'.
What does an RSC output? — A serialized RSC payload streamed to the client, not just plain HTML.
Why use RSCs? — Direct secure backend access and smaller client bundles for faster time to interactive.
How do RSCs stream UI? — By composing with Suspense boundaries that show a fallback while slow subtrees load.