React: Explain React Server Components

React Server Components (RSC) are components that run exclusively on the server and send their rendered HTML to the client. They cannot use client-side features like state, effects, or browser APIs — but they can directly access databases, file systems, and other server resources.

Key differences from Client Components: | Feature | Server Component | Client Component | |---------|------------------|------------------| | Runs on | Server | Client (browser) | | Access to | Database, filesystem, secrets | Browser APIs, state, effects | | JavaScript sent to client | No | Yes | | useState / useEffect | Cannot use | Can use | | Event handlers | Cannot use | Can use | | Direct DB queries | ✅ | ❌ |

How they work in Next.js App Router: In Next.js 13+, components in app/ directory are Server Components by default. To make a component a Client Component, add "use client" at the top of the file.

Complete code example:

1// ============================================
2// Server Component (default in Next.js App Router)
3// ============================================
4import { db } from "@/lib/database";
5import AddToCartButton from "./AddToCartButton"; // client component
6
7async function ProductList() {
8  // Direct database access — no API route needed!
9  const products = await db.query("SELECT * FROM products ORDER BY name");
10
11  return (
12    <div>
13      <h1>Products ({products.length})</h1>
14      <ul>
15        {products.map(product => (
16          <li key={product.id}>
17            <h2>{product.name}</h2>
18            <p>{product.description}</p>
19            <span>${product.price}</span>
20            <AddToCartButton productId={product.id} />
21          </li>
22        ))}
23      </ul>
24    </div>
25  );
26}
27
28export default ProductList;
29
30// ============================================
31// Client Component ("use client" directive)
32// ============================================
33"use client";
34import { useState } from "react";
35
36function AddToCartButton({ productId }: { productId: string }) {
37  const [loading, setLoading] = useState(false);
38  const [added, setAdded] = useState(false);
39
40  const handleClick = async () => {
41    setLoading(true);
42    await fetch("/api/cart", {
43      method: "POST",
44      body: JSON.stringify({ productId }),
45    });
46    setAdded(true);
47    setLoading(false);
48  };
49
50  return (
51    <button onClick={handleClick} disabled={loading}>
52      {loading ? "Adding..." : added ? "Added!" : "Add to Cart"}
53    </button>
54  );
55}
56
57export default AddToCartButton;

Benefits:

1. Zero client-side JavaScript for server components — reduces bundle size dramatically
2. Direct access to backend resources — no need for API routes or loading states
3. Automatic code splitting — client components are loaded separately
4. Better SEO — content is rendered on the server and sent as HTML
5. Security — server components can access secrets without exposing them to the client

Critical pitfalls:

• Cannot use hooks (useState, useEffect, useRef), browser APIs, event handlers, or Web Workers
• Cannot use Context providers that require client-side state (but can consume them)
• Must mark any component that uses client features with "use client" directive
• Server components cannot be imported by client components directly — they pass data as props
• Serializability constraint — props passed from server to client must be serializable (no functions, no classes)

When to use Server Components vs. Client Components:

• Server Components: data fetching, static content, SEO-critical pages, components that access databases
• Client Components: forms, interactive UI, browser APIs, state management, real-time updates