React Server Components vs Client Components: Quando Usar Cada Um no Next.js

// app/products/page.tsx
// Server Component por padrão: sem "use client", sem useState, sem useEffect.
// O Next.js executa isso no servidor e envia HTML + RSC Payload.
 
import { ProductList } from "./product-list";
import { db } from "@/lib/database";
 
export default async function ProductsPage() {
  // Acesso direto ao banco, sem API intermediária.
  // Isso só funciona porque o código nunca chega ao navegador.
  const products = await db.product.findMany({
    where: { active: true },
    orderBy: { createdAt: "desc" },
    take: 50,
  });
 
  return (
    <main>
      <h1>Produtos</h1>
      <ProductList products={products} />
    </main>
  );
}

// app/products/product-list.tsx
"use client";
 
// Este componente precisa de "use client" porque usa useState para filtro local.
// Ele recebe os dados já carregados via props: o fetch aconteceu no servidor.
import { useState } from "react";
 
type Product = {
  id: string;
  name: string;
  price: number;
  category: string;
};
 
export function ProductList({ products }: { products: Product[] }) {
  const [filter, setFilter] = useState("");
 
  const filtered = products.filter((p) =>
    p.name.toLowerCase().includes(filter.toLowerCase())
  );
 
  return (
    <div>
      <input
        type="text"
        placeholder="Filtrar por nome"
        value={filter}
        onChange={(e) => setFilter(e.target.value)}
      />
      <ul>
        {filtered.map((product) => (
          <li key={product.id}>
            {product.name} — R$ {product.price.toFixed(2)}
          </li>
        ))}
      </ul>
    </div>
  );
}

// app/dashboard/page.tsx
// Server Component: busca métricas e delega visualização para Client Component
 
import { DashboardCharts } from "./dashboard-charts";
import { getMetrics } from "@/lib/analytics";
 
export default async function DashboardPage() {
  const metrics = await getMetrics({ period: "30d" });
 
  return (
    <section>
      <h1>Dashboard</h1>
      {/* O componente de gráficos precisa de interatividade (hover, zoom),
          mas os dados já chegam prontos do servidor */}
      <DashboardCharts data={metrics} />
    </section>
  );
}

// app/dashboard/dashboard-charts.tsx
"use client";
 
// recharts é uma lib pesada (~200kb). Ao isolar aqui, apenas esta parte
// entra no bundle do cliente. O resto da página é Server Component.
import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer } from "recharts";
 
type MetricPoint = {
  date: string;
  pageViews: number;
  uniqueUsers: number;
};
 
export function DashboardCharts({ data }: { data: MetricPoint[] }) {
  return (
    <ResponsiveContainer width="100%" height={400}>
      <LineChart data={data}>
        <XAxis dataKey="date" />
        <YAxis />
        <Tooltip />
        <Line type="monotone" dataKey="pageViews" stroke="#2563eb" />
        <Line type="monotone" dataKey="uniqueUsers" stroke="#16a34a" />
      </LineChart>
    </ResponsiveContainer>
  );
}

// app/blog/[slug]/page.tsx
"use client";
 
// ERRADO: toda a página vira Client Component.
// Consequências:
// 1. Não pode usar async/await direto (precisa de useEffect)
// 2. Todo o código desta página vai pro bundle do cliente
// 3. Perde o benefício de streaming do App Router
 
import { useEffect, useState } from "react";
 
export default function BlogPost({ params }: { params: { slug: string } }) {
  const [post, setPost] = useState<any>(null);
 
  useEffect(() => {
    fetch(`/api/posts/${params.slug}`)
      .then((res) => res.json())
      .then(setPost);
  }, [params.slug]);
 
  if (!post) return <p>Carregando...</p>;
 
  return <article dangerouslySetInnerHTML={{ __html: post.content }} />;
}

// app/blog/[slug]/page.tsx
// CORRETO: Server Component. Dados buscados no servidor, HTML enviado pronto.
 
import { notFound } from "next/navigation";
import { db } from "@/lib/database";
import { formatDate } from "@/lib/utils";
 
export default async function BlogPost({
  params,
}: {
  params: { slug: string };
}) {
  const post = await db.post.findUnique({
    where: { slug: params.slug, published: true },
  });
 
  if (!post) notFound();
 
  return (
    <article>
      <h1>{post.title}</h1>
      <time dateTime={post.createdAt.toISOString()}>
        {formatDate(post.createdAt)}
      </time>
      <div dangerouslySetInnerHTML={{ __html: post.contentHtml }} />
    </article>
  );
}

// components/header.tsx
"use client";
 
// ERRADO: o header inteiro vira Client Component só porque o botão de menu
// precisa de useState. O logo, a navegação estática, tudo vai pro bundle.
 
import { useState } from "react";
import { Logo } from "./logo";
import { NavLinks } from "./nav-links";
import { MobileMenu } from "./mobile-menu";
 
export function Header() {
  const [menuOpen, setMenuOpen] = useState(false);
 
  return (
    <header>
      <Logo />
      <NavLinks />
      <button onClick={() => setMenuOpen(!menuOpen)}>Menu</button>
      {menuOpen && <MobileMenu />}
    </header>
  );
}

// components/header.tsx
// CORRETO: Server Component. Só o toggle é Client Component.
 
import { Logo } from "./logo";
import { NavLinks } from "./nav-links";
import { MobileMenuToggle } from "./mobile-menu-toggle";
 
export function Header() {
  return (
    <header>
      <Logo />
      <NavLinks />
      <MobileMenuToggle />
    </header>
  );
}

// components/mobile-menu-toggle.tsx
"use client";
 
// Apenas este componente entra no bundle do cliente.
// Logo e NavLinks permanecem como Server Components: zero JS.
import { useState } from "react";
import { MobileMenu } from "./mobile-menu";
 
export function MobileMenuToggle() {
  const [open, setOpen] = useState(false);
 
  return (
    <>
      <button onClick={() => setOpen(!open)} aria-expanded={open}>
        Menu
      </button>
      {open && <MobileMenu />}
    </>
  );
}

// app/products/actions.ts
"use server";
 
// Server Action: executa no servidor, pode acessar banco, validar, etc.
import { db } from "@/lib/database";
import { revalidatePath } from "next/cache";
import { z } from "zod";
 
const addToCartSchema = z.object({
  productId: z.string().uuid(),
  quantity: z.number().int().min(1).max(99),
});
 
export async function addToCart(formData: FormData) {
  const parsed = addToCartSchema.safeParse({
    productId: formData.get("productId"),
    quantity: Number(formData.get("quantity")),
  });
 
  if (!parsed.success) {
    return { error: "Dados inválidos" };
  }
 
  await db.cartItem.upsert({
    where: { productId: parsed.data.productId },
    update: { quantity: { increment: parsed.data.quantity } },
    create: parsed.data,
  });
 
  revalidatePath("/cart");
  return { success: true };
}

// app/products/add-to-cart-button.tsx
"use client";
 
// Client Component que chama a Server Action via form action.
// useFormStatus dá feedback de loading sem gerenciar estado manual.
import { useFormStatus } from "react-dom";
import { addToCart } from "./actions";
 
function SubmitButton() {
  const { pending } = useFormStatus();
  return (
    <button type="submit" disabled={pending}>
      {pending ? "Adicionando..." : "Adicionar ao carrinho"}
    </button>
  );
}
 
export function AddToCartButton({ productId }: { productId: string }) {
  return (
    <form action={addToCart}>
      <input type="hidden" name="productId" value={productId} />
      <input type="hidden" name="quantity" value="1" />
      <SubmitButton />
    </form>
  );
}

// app/settings/page.tsx
// Server Component que compõe um layout interativo com conteúdo estático
 
import { Tabs } from "./tabs";
import { ProfileSettings } from "./profile-settings";
import { SecuritySettings } from "./security-settings";
 
export default function SettingsPage() {
  return (
    <Tabs
      tabs={[
        // ProfileSettings e SecuritySettings são Server Components.
        // Eles renderizam no servidor e chegam como RSC Payload.
        { label: "Perfil", content: <ProfileSettings /> },
        { label: "Segurança", content: <SecuritySettings /> },
      ]}
    />
  );
}