React Server Components (RSC) — Complete Interview Guide

The Critical Distinction: RSC vs SSR

This is the most common point of confusion, and interviewers will test it directly.

• SSR (Server-Side Rendering) — runs React on the server, converts the component tree to an HTML string, sends HTML to the browser, then the client downloads the JS bundle and hydrates the HTML (attaches event listeners). Both server and client run the same component code.
• RSC (React Server Components) — Server Components run only on the server, never on the client. They return a serialized React tree (not HTML) to the client. Their JavaScript is never sent to the browser — they have zero bundle size.

You can use both together: Next.js App Router uses RSC for data fetching (zero bundle cost) combined with SSR to generate HTML for fast first paints.

The 'use client' Directive

By default in the App Router, every component is a Server Component. The 'use client' directive at the top of a file marks it — and everything it imports — as a Client Component:

'use client'; // ← This file and its imports are Client Components

import { useState } from 'react';

export function Counter() {
  const [count, setCount] = useState(0); // state only works in Client Components
  return (
    <button onClick={() => setCount(c => c + 1)}>
      Count: {count}
    </button>
  );
}

The directive marks a boundary in the module graph — everything above it (imported by a Server Component) is server-only; everything below (imported by a Client Component) runs on the client.

What Server Components CAN Do

• Async/await directly — Server Components are async functions. You can await database calls, file reads, and API calls directly in the component body.
• Direct database access — call your ORM (Prisma, Drizzle) or query builder directly; no API layer needed.
• Access secrets — environment variables with API keys, database credentials — these never reach the browser.
• Import large server-only libraries — heavy data processing libraries that would bloat the bundle can be used freely on the server.
• Render Client Components as children — a Server Component can render Client Components; it just can't pass functions or non-serializable values as props.

// Server Component — async, direct DB call, no 'use client'
async function UserProfile({ userId }) {
  const user = await db.user.findUnique({ where: { id: userId } }); // direct DB query

  return (
    <div>
      <h1>{user.name}</h1>
      <LikeButton postId={user.featuredPostId} /> {/* Client Component child is fine */}
    </div>
  );
}

What Server Components CANNOT Do

• useState, useReducer — no state in Server Components
• useEffect, useLayoutEffect — no lifecycle effects
• Event handlers — onClick, onChange, etc.
• Browser APIs — window, document, localStorage
• Context consumers — useContext does not work in Server Components
• Pass functions as props to Client Components — functions aren't serializable across the server/client boundary

Rule of thumb: if it needs the browser or interactivity → 'use client'. If it's data fetching and markup → Server Component.

Data Fetching — No More useEffect

In Server Components, you fetch data directly in the component body with async/await. No useEffect, no useState for loading/error, no API route needed:

// Old pattern — Client Component with useEffect
'use client';
function ProductList() {
  const [products, setProducts] = useState([]);
  useEffect(() => {
    fetch('/api/products').then(r => r.json()).then(setProducts);
  }, []);
  return <ul>{products.map(p => <li key={p.id}>{p.name}</li>)}</ul>;
}

// New RSC pattern — Server Component, zero client JS
async function ProductList() {
  const products = await db.product.findMany(); // direct DB, no API route
  return <ul>{products.map(p => <li key={p.id}>{p.name}</li>)}</ul>;
}

Server Actions — Mutations from the Server

Server Actions (marked with 'use server') are async functions that run on the server but can be called from Client Components — like an RPC call. They're the RSC equivalent of an API endpoint, but with less boilerplate:

'use server';

export async function createPost(formData) {
  const title = formData.get('title');
  await db.post.create({ data: { title } });
  revalidatePath('/posts'); // clear the cache for the posts page
}

// Used directly in a Client Component form — no /api/posts route needed
<form action={createPost}>
  <input name="title" />
  <button type="submit">Create</button>
</form>

Bundle Size Impact

A Server Component that imports a 500KB data processing library adds zero bytes to the client bundle. The same import in a Client Component adds 500KB. This is the core bundle-size advantage of RSC — move heavy logic to the server, ship less JavaScript to the browser.