What are React Server Components (RSC)?
Answer
React Server Components (RSC) are components that render exclusively on the server and send HTML to the browser — they never include JavaScript in the client bundle. This is a React 18 feature, and Next.js App Router uses them by default. Key properties: (1) Zero client JavaScript: Server Components don't add to the JavaScript bundle — they render to HTML on the server; (2) Direct backend access: can access databases, filesystems, and secret environment variables directly — no need for API routes; (3) No interactivity: cannot use useState, useEffect, event handlers, browser APIs, or any hooks — they are pure server-rendering; (4) Async by default: can use async/await directly: async function UserList() { const users = await db.query("SELECT * FROM users"); return <ul>{users.map(u => <li key={u.id}>{u.name}</li>)}</ul>; }. Benefits: faster page loads (less JavaScript), better SEO (rendered HTML), keeps secrets on server (no env var leakage), reduced bundle size. Limitations: no event handlers, no browser-only APIs, no React hooks, no class components. Client Components: add "use client" directive at the top. Can use all React features. Can be nested inside Server Components. Composition: Server Components pass data to Client Components via props. Client Components can import other Client Components but can't import Server Components.