Server Components - Run React components on the server with zero client-side JavaScript

// app/page.tsx  (Server Component -- the default in Next.js App Router)
import { db } from "@/lib/db";
import ClientCounter from "./ClientCounter";
 
export default async function DashboardPage() {
  // Direct database access -- this code never reaches the browser
  const stats = await db.query("SELECT count(*) FROM orders");
 
  return (
    <main>
      <h1>Dashboard</h1>
      <p>Total orders: {stats.count}</p>
      {/* Hand off to a Client Component for interactivity */}
      <ClientCounter initialCount={stats.count} />
    </main>
  );
}

// app/ClientCounter.tsx
"use client";
 
import { useState } from "react";
 
export default function ClientCounter({ initialCount }: { initialCount: number }) {
  const [count, setCount] = useState(initialCount);
  return <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>;
}

// A product catalog page mixing server and client concerns
// app/products/page.tsx  (Server Component)
import { Suspense } from "react";
import { getProducts, getCategories } from "@/lib/api";
import ProductGrid from "./ProductGrid";
import CategoryFilter from "./CategoryFilter";
 
export default async function ProductsPage() {
  const categories = await getCategories();
 
  return (
    <div className="flex gap-6">
      {/* Client Component for interactive filtering */}
      <CategoryFilter categories={categories} />
 
      {/* Server Component with streaming */}
      <Suspense fallback={<p>Loading products...</p>}>
        <ProductList />
      </Suspense>
    </div>
  );
}
 
async function ProductList() {
  const products = await getProducts();
  // ProductGrid is a "use client" component that receives serializable props
  return <ProductGrid products={products} />;
}

// app/products/CategoryFilter.tsx
"use client";
 
import { useState, useTransition } from "react";
import { useRouter } from "next/navigation";
 
type Props = { categories: { id: string; name: string }[] };
 
export default function CategoryFilter({ categories }: Props) {
  const [selected, setSelected] = useState<string | null>(null);
  const [isPending, startTransition] = useTransition();
  const router = useRouter();
 
  function handleSelect(id: string) {
    setSelected(id);
    startTransition(() => {
      router.push(`/products?category=${id}`);
    });
  }
 
  return (
    <aside>
      <h2>Categories</h2>
      <ul>
        {categories.map((c) => (
          <li key={c.id}>
            <button
              onClick={() => handleSelect(c.id)}
              className={selected === c.id ? "font-bold" : ""}
            >
              {c.name}
            </button>
          </li>
        ))}
      </ul>
      {isPending && <p>Filtering...</p>}
    </aside>
  );
}

// app/products/ProductGrid.tsx
"use client";
 
type Product = { id: string; name: string; price: number };
 
export default function ProductGrid({ products }: { products: Product[] }) {
  return (
    <div className="grid grid-cols-3 gap-4">
      {products.map((p) => (
        <div key={p.id} className="border p-4 rounded">
          <h3>{p.name}</h3>
          <p>${p.price.toFixed(2)}</p>
          <button onClick={() => alert(`Added ${p.name}`)}>Add to cart</button>
        </div>
      ))}
    </div>
  );
}

// Pattern 1: Top-level await
async function UserProfile({ userId }: { userId: string }) {
  const user = await fetchUser(userId);
  return <h1>{user.name}</h1>;
}
 
// Pattern 2: Parallel data fetching
async function Dashboard() {
  const [users, posts, stats] = await Promise.all([
    fetchUsers(),
    fetchPosts(),
    fetchStats(),
  ]);
  return (
    <>
      <UserList users={users} />
      <PostFeed posts={posts} />
      <StatsPanel stats={stats} />
    </>
  );
}
 
// Pattern 3: Pass promise to client (defer resolution)
async function Page() {
  const dataPromise = fetchSlowData(); // do NOT await
  return <ClientChart dataPromise={dataPromise} />;
}

// This works because children is already-rendered JSX, not an import
"use client";
export function ClientLayout({ children }: { children: React.ReactNode }) {
  const [open, setOpen] = useState(true);
  return <div className={open ? "expanded" : "collapsed"}>{children}</div>;
}