Server Components

🔍 What Is It?

React Server Components (RSC) are components that:

• →Run exclusively on the server — during the request (SSR) or at build time (SSG)
• →Can be async — async function Page() is valid
• →Access server-only resources — databases, file system, environment secrets
• →Ship zero JavaScript — only the rendered HTML/RSC payload reaches the browser
• →Cannot use browser APIs — no useState, no useEffect, no window, no document

In Next.js App Router, every component is a Server Component by default. You opt into client-side behaviour with 'use client' at the top of a file.

🎯 Why Do We Need It?

Before Server Components, React had a fundamental problem: all component logic shipped to the browser as JavaScript, even logic that only ever ran once during render.

• →A component that formats a date shipped moment.js to the browser
• →A component that rendered markdown shipped a markdown parser to the browser
• →A component that fetched from a database needed an API route as a proxy

Server Components eliminate this entirely:

• →Heavy libraries stay on the server — zero bundle impact
• →Direct database queries without API routes
• →Secrets never leave the server
• →Faster page loads — less JS to parse and execute

🏗️ What Happens in Real Projects?

Server Components handle the data-heavy, non-interactive parts of your UI:

• →Product listing pages — fetch from DB, render HTML, no client JS needed
• →Blog posts — fetch from CMS, render markdown, static HTML output
• →Dashboard metrics — query analytics DB directly, render charts as SVG
• →Navigation menus — fetch from CMS, render links, no interactivity needed

What stays as Client Components:

• →Search bars (user typing = state)
• →Shopping cart (add/remove = state)
• →Modals, dropdowns, tooltips (open/close = state)
• →Real-time data (WebSocket, polling)

⚙️ How It Works

Server Component rendering pipeline:

1. Next.js receives a request for /products
2. It renders the ProductsPage Server Component on the server
3. The component runs await db.query(...) — direct DB access
4. React renders the component tree to an RSC payload (not plain HTML)
5. Next.js converts the RSC payload to HTML and streams it to the browser
6. The browser displays the HTML immediately — no JS needed for static parts
7. Client Components in the tree hydrate separately

The RSC payload is a JSON-like format that describes the component tree. On client-side navigation, Next.js fetches the RSC payload (not a full HTML page) and merges it into the existing React tree.

💻 Example

Server Component Patterns — Real patterns for Server Components in production — direct DB access, parallel fetching, and composition with Client Components.

// app/products/page.tsx — Server Component
import { db } from '@/lib/db'; // Prisma, Drizzle, etc.
import { ProductCard } from './_components/ProductCard';

export default async function ProductsPage({
  searchParams,
}: {
  searchParams: { category?: string };
}) {
  // Direct DB query — no API route needed
  // This code NEVER runs in the browser
  const products = await db.product.findMany({
    where: { category: searchParams.category },
    orderBy: { createdAt: 'desc' },
    take: 20,
  });

  return (
    <div className="grid grid-cols-3 gap-4">
      {products.map((product) => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  );
}

🤔 Common Confusions

🚨 Common Production Issues

✅ Best Practices

🏛️ Architect's Note

💬 Frequently Asked Questions

🎯 Key Takeaways

🔗 Related Topics

🎯 Practice this topic in interviews

↗ Where this topic fits