React Server Components: The Future of Data Fetching

React Server Components (RSC) run on the server only-they never ship component logic to the client. That enables direct database access and smaller JavaScript bundles.

Server vs Client Components

// app/page.js - Server Component (default in App Router)
async function ProductList() {
  const products = await db.products.findMany();
  return (
    <ul>
      {products.map((p) => <li key={p.id}>{p.name}</li>)}
    </ul>
  );
}

Add 'use client' only when you need hooks, event handlers, or browser APIs.

Benefits

Zero bundle cost for server-only dependencies (ORM, heavy libs). Data fetching colocated with UI. Streaming with Suspense for progressive rendering.

Mental Model

Server Components return serializable props to Client Components. Think of the server as the default and the client as the exception.

Conclusion

RSC with Next.js App Router is the direction React full stack is heading. Learn the server/client boundary now-it shapes how you structure APIs and auth.