Server Components vs. Client Components — A Decision Framework

// app/dashboard/page.tsx — Server Component (no directive needed)
import { db } from "@/lib/db";
import { RevenueChart } from "./revenue-chart";
 
export default async function DashboardPage() {
  const metrics = await db.query.metrics.findMany({
    where: (m, { gte }) => gte(m.date, thirtyDaysAgo()),
    orderBy: (m, { asc }) => asc(m.date),
  });
 
  const dataPoints = metrics.map((m) => ({ date: m.date, value: m.revenue }));
  const total = metrics.reduce((sum, m) => sum + m.revenue, 0);
 
  return (
    <section>
      <h2>Revenue — Last 30 Days</h2>
      <RevenueChart data={dataPoints} />
      <p>Total: ${total.toLocaleString()}</p>
    </section>
  );
}

"use client";
 
import { useActionState } from "react";
import { updateProfile } from "@/app/actions/profile";
 
export function ProfileForm({ user }: { user: User }) {
  const [state, formAction, isPending] = useActionState(updateProfile, {
    errors: {},
  });
 
  return (
    <form action={formAction}>
      <label htmlFor="name">Name</label>
      <input
        id="name"
        name="name"
        defaultValue={user.name}
        aria-describedby={state.errors.name ? "name-error" : undefined}
      />
      {state.errors.name && (
        <p id="name-error" role="alert">{state.errors.name}</p>
      )}
 
      <label htmlFor="bio">Bio</label>
      <textarea id="bio" name="bio" defaultValue={user.bio ?? ""} rows={4} />
 
      <button type="submit" disabled={isPending}>
        {isPending ? "Saving..." : "Save Changes"}
      </button>
    </form>
  );
}

// app/products/[id]/page.tsx — Server Component
import { getProduct } from "@/lib/products";
import { AddToCartButton } from "./add-to-cart-button";
import { ImageGallery } from "./image-gallery";
 
export default async function ProductPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const product = await getProduct(id);
 
  return (
    <article>
      {/* Client: needs swipe gestures and zoom */}
      <ImageGallery images={product.images} />
 
      <div>
        <h2>{product.name}</h2>
        <p>{product.description}</p>
        <p>${product.price}</p>
        {/* Client: needs onClick + cart state */}
        <AddToCartButton productId={product.id} price={product.price} />
      </div>
    </article>
  );
}

// app/blog/search-input.tsx
"use client";
 
import { useSearchParams, useRouter } from "next/navigation";
import { useDebouncedCallback } from "use-debounce";
 
export function SearchInput() {
  const searchParams = useSearchParams();
  const router = useRouter();
 
  const handleSearch = useDebouncedCallback((query: string) => {
    const params = new URLSearchParams(searchParams.toString());
    if (query) {
      params.set("q", query);
    } else {
      params.delete("q");
    }
    router.replace(`/blog?${params.toString()}`);
  }, 300);
 
  return (
    <input
      type="search"
      placeholder="Search posts..."
      defaultValue={searchParams.get("q") ?? ""}
      onChange={(e) => handleSearch(e.target.value)}
    />
  );
}

// app/blog/page.tsx — Server Component
import { getPosts } from "@/lib/posts";
import { SearchInput } from "./search-input";
 
export default async function BlogPage({
  searchParams,
}: {
  searchParams: Promise<{ q?: string }>;
}) {
  const { q } = await searchParams;
  const posts = await getPosts({ search: q });
 
  return (
    <section>
      <SearchInput />
      <ul>
        {posts.map((post) => (
          <li key={post.slug}>
            <a href={`/blog/${post.slug}`}>{post.title}</a>
            <p>{post.excerpt}</p>
          </li>
        ))}
      </ul>
    </section>
  );
}

// app/settings/page.tsx — Server Component
import { auth } from "@/lib/auth";
import { redirect } from "next/navigation";
import { SettingsForm } from "./settings-form";
 
export default async function SettingsPage() {
  const session = await auth();
 
  if (!session) {
    redirect("/login");
  }
 
  return (
    <section>
      <h2>Account Settings</h2>
      {/* Pass only what the client needs — not the full session */}
      <SettingsForm
        name={session.user.name}
        email={session.user.email}
        plan={session.user.plan}
      />
    </section>
  );
}

// ❌ Wrong — makes EVERYTHING a client component
"use client";
 
export default async function ProductsPage() {
  // This won't even work — async components
  // can't be Client Components
  const products = await getProducts();
  return <ProductList products={products} />;
}

// ✅ Right — server page with client islands
// app/products/page.tsx (Server Component)
import { getProducts } from "@/lib/products";
import { ProductFilters } from "./product-filters"; // "use client"
 
export default async function ProductsPage() {
  const products = await getProducts();
 
  return (
    <section>
      <ProductFilters />
      <ul>
        {products.map((p) => (
          <li key={p.id}>{p.name} — ${p.price}</li>
        ))}
      </ul>
    </section>
  );
}

// ❌ Wrong — client-side waterfall, loading spinner, no SEO
"use client";
 
import { useEffect, useState } from "react";
 
export function PostContent({ slug }: { slug: string }) {
  const [post, setPost] = useState<Post | null>(null);
 
  useEffect(() => {
    fetch(`/api/posts/${slug}`).then((r) => r.json()).then(setPost);
  }, [slug]);
 
  if (!post) return <div>Loading...</div>;
  return <article>{post.content}</article>;
}

// ✅ Right — server component, no loading state, SEO-friendly
// app/blog/[slug]/page.tsx
import { getPost } from "@/lib/posts";
 
export default async function PostPage({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const post = await getPost(slug);
 
  return (
    <article>
      <h2>{post.title}</h2>
      <time dateTime={post.date}>{post.formattedDate}</time>
      <div dangerouslySetInnerHTML={{ __html: post.html }} />
    </article>
  );
}

// ❌ Wrong — functions can't cross the server/client boundary
// Server Component
export default function Page() {
  const handleClick = () => console.log("clicked");
  return <ClientButton onClick={handleClick} />;
}

// ✅ Right — use Server Actions for server-side logic
// Server Component
import { likePost } from "@/app/actions/posts";
 
export default function Page({ postId }: { postId: string }) {
  const likeThisPost = likePost.bind(null, postId);
  return <LikeButton action={likeThisPost} />;
}

// like-button.tsx
"use client";
 
export function LikeButton({ action }: { action: () => Promise<void> }) {
  return (
    <form action={action}>
      <button type="submit">Like</button>
    </form>
  );
}

// ❌ Wrong — this component has no interactivity
"use client";
 
export function UserAvatar({ name, src }: { name: string; src: string }) {
  return <img src={src} alt={name} />;
}

// ✅ Right — leave off the directive, it's a Server Component by default
import Image from "next/image";
 
export function UserAvatar({ name, src }: { name: string; src: string }) {
  return <Image src={src} alt={name} width={40} height={40} />;
}