Q25: What are React Server Components (RSC) and how do they differ from Client Components?

React Server Components (RSC) run exclusively on the server during request or build execution. They don't ship JavaScript bundle bytes to the client, can query databases directly, and cannot use state or effects. Client Components ('use client') ship JS bundles to browser engines and handle interactive events, state, and DOM effects.

RSC vs Client Component Architecture

React Server Component Direct DB Query

// Default: Server Component in Next.js App Router (No 'use client')
import db from '@/lib/db';

export default async function Page() {
  // Direct database query on server without API endpoints
  const posts = await db.query('SELECT * FROM posts');
  return <ul>{posts.map(p => <li key={p.id}>{p.title}</li>)}</ul>;
}

💡 Server Components execute database calls directly on Node.js servers, streaming HTML layout to browsers.

Key Takeaways

RSCs reduce client JS bundle sizes to zero bytes for server components.
Client components ('use client') handle interactivity, state, and browser APIs.

Knowledge Check

Which React feature allows calling useState() or onClick event listeners inside a Next.js App Router component?

Q25: What are React Server Components (RSC) and how do they differ from Client Components?

STAY UPDATED WITH BYTES!