Web Fundamentals

React Server Components: Zero-JS Server Rendering

mediumWeb Fundamentals

React Server Components: Zero-JS Server Rendering

Learn the interview-ready mental model, practical trade-offs, and production patterns for this web fundamentals topic.

Topic content

TL;DRServer Components render on the server and stay out of client bundles. Client Components handle interactivity only where needed.
Very High Signal
Google
Meta
Netflix
Agoda
30-Second Answerstart every interview with this

React Server Components (RSC) allow you to render components on the server and exclude their code from the client JavaScript bundle. In frameworks like Next.js App Router, components are Server Components by default. Use 'use client' only for truly interactive parts. This dramatically reduces bundle size, hydration cost, and main-thread work.

Server Components = chef prepares and plates the food in the kitchen (server). Only the final plated dish is sent through the window. Client Components = the waiter (browser) gets some tools and instructions to handle final touches like seasoning or customer requests. You only ship tools for the parts that actually need them.

Request Arrives
Server Components render + fetch data
Client boundary reached
Minimal Client JS hydrates only interactive islands
Full interactivity

1Server Components

Run exclusively on the server. Can fetch data, access databases, read files, and keep secrets safe. Their output (HTML + serialized props) is sent to the client with no JavaScript cost.

page.tsxtsx
export default async function ProductsPage() {
  const products = await db.products.findMany();
  return <ProductList products={products} />;
}

2Client Components

Marked with 'use client'. Handle state, effects, event handlers, and browser APIs. Only these parts ship JavaScript and hydrate.

Button.tsxtsx
'use client';

export default function Button() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

3Composition & Boundaries

Server Components can render Client Components. Data flows from server to client via props. Keep client boundaries small and intentional.

4Data Fetching Advantages

Fetch directly in Server Components with native async/await. Parallel fetching with Promise.all is natural. No need for client-side loading states in many cases.

Key Takeaways
  • ✓Server Components = zero client JS for non-interactive UI
  • ✓Client Components = only for state, events, and browser APIs
  • ✓'use client' creates a boundary in the module graph
  • ✓RSC excels at data fetching directly on the server
  • ✓Biggest win: dramatically smaller bundles and hydration cost
  • ✓Combine with Streaming SSR and Islands for optimal performance
  • ✓Measure client bundle size — not just render time