5 questions foundWhat is a React Server Component and how is it different from a regular component?
Intermediate A Server Component renders entirely on the server, sending only the finished result to the browser instead of the actual JavaScript code needed to run it. This means a Server Component cannot use hooks like useState or respond to clicks directly, but it can access server only resources, like a database, directly and safely.
// A Server Component, this is the default in frameworks like Next.js
async function ProductList() {
const products = await db.products.findAll(); // safe, runs only on the server
return (
<ul>
{products.map((p) => <li key={p.id}>{p.name}</li>)}
</ul>
);
}
Real-world example An online store fetches its product list directly from the database inside a Server Component, without needing to build a separate API endpoint or send any database logic to the visitor's browser at all.
Common follow-ups: Why can a Server Component not use hooks like useState or useEffect?;How does using Server Components reduce the amount of JavaScript sent to the browser?
Server-Side Rendering (SSR) & Next.js;Data Fetching (React Query & SWR)
What is a Client Component and when do you need one instead of a Server Component?
Beginner A Client Component runs in the browser and can use hooks, respond to clicks, and manage its own state, just like components worked before Server Components existed. You mark a file as a Client Component using the words use client at the very top, and you need one whenever a piece of the interface needs interactivity.
'use client';
function LikeButton() {
const [liked, setLiked] = useState(false);
return (
<button onClick={() => setLiked(!liked)}>
{liked ? 'Liked' : 'Like'}
</button>
);
}
Real-world example A blog article page renders mostly as a Server Component for fast loading, but its like button is marked as a Client Component since it needs to respond to clicks and remember whether the user already liked it.
Common follow-ups: Can a Server Component include a Client Component inside it?;What happens if you forget to add the use client directive to an interactive component?
Hooks;Static Site Generation (SSG) & Hydration
How do Server Components and Client Components work together in the same app?
Advanced Server Components can render Client Components as children, letting a mostly static page include small interactive pieces exactly where needed. However, a Server Component cannot be directly imported and rendered inside a Client Component, since Client Components have already been sent to the browser and cannot run server only code.
// Server Component
function ProductPage({ productId }) {
const product = await getProduct(productId); // server only data fetching
return (
<div>
<h1>{product.name}</h1>
<AddToCartButton productId={productId} /> {/* a Client Component */}
</div>
);
}
Real-world example A product page fetches its data directly on the server for speed, but includes a small interactive AddToCartButton Client Component right where a customer needs to click, combining the strengths of both approaches on one page.
Common follow-ups: How would you pass data from a Server Component down into a Client Component as a prop?;Why can a Client Component not directly import and render a Server Component?
Suspense & Concurrent Rendering;Data Fetching (React Query & SWR)
What are the main benefits of using Server Components in a real React app?
Intermediate Server Components reduce the amount of JavaScript sent to the browser, since their actual code never needs to run on the client at all. They also let you safely access databases and secret keys directly, and they can improve initial page load speed since the server can send fully rendered content right away.
// This safely uses a secret database connection string, never exposed to the browser
async function Dashboard() {
const stats = await db.query('SELECT * FROM stats', { key: process.env.SECRET_DB_KEY });
return <StatsView data={stats} />;
}
Real-world example A company dashboard loads noticeably faster after switching several data heavy sections to Server Components, since much less JavaScript now needs to download and run in the visitor's browser before the page becomes usable.
Common follow-ups: Does using Server Components mean an app no longer needs a separate backend API?;What kind of apps benefit the most from adopting Server Components?
Performance (memo/useMemo);Security in React (XSS & dangerouslySetInnerHTML)
Which popular React framework introduced strong built in support for Server Components?
Beginner Next.js, one of the most widely used React frameworks, added first class support for Server Components starting with its app router, making Server Components the default for every new page unless you explicitly mark a component as a Client Component using the use client directive.
// app/page.js in a Next.js project, this is a Server Component by default
export default async function HomePage() {
const news = await fetchLatestNews();
return <NewsList articles={news} />;
}
Real-world example A news website built with the Next.js app router fetches its latest articles directly inside Server Components by default, only adding the use client directive to smaller pieces like a comment box that genuinely need interactivity.
Common follow-ups: What other React frameworks besides Next.js support Server Components?;Why did Server Components become the default choice instead of an optional feature in newer frameworks?
Server-Side Rendering (SSR) & Next.js;Static Site Generation (SSG) & Hydration