3a:["$","p","1",{"className":"text-foreground/90 text-lg leading-relaxed mb-4","children":"A principal razão de existir essa distinção é a arquitetura de Server Components introduzida no React 18 e adotada pelo Next.js App Router. Por padrão, todo componente no diretório app/ é um Server Component — ele roda apenas no servidor, não aumenta o bundle do cliente e pode acessar diretamente banco de dados, sistema de arquivos e variáveis de ambiente sensíveis. O Client Component quebra esse paradigma quando você precisa de interatividade, estado local ou efeitos colaterais no browser."}] 3b:["$","p","2",{"className":"text-foreground/90 text-lg leading-relaxed mb-4","children":"Casos de uso reais incluem: formulários com validação em tempo real, modais e dropdowns controlados por estado, componentes que consomem Context API, integrações com bibliotecas de terceiros que dependem do DOM (como editores de texto rich text, mapas, bibliotecas de animação), e qualquer lógica que dependa de eventos do usuário (onClick, onChange, onSubmit). Uma pegadinha clássica é tentar usar useState ou useEffect em um Server Component — o Next.js lança um erro em build time ou runtime avisando que aquele hook não é suportado fora do contexto cliente."}] 3c:["$","p","3",{"className":"text-foreground/90 text-lg leading-relaxed mb-4","children":"Uma pegadinha crítica de arquitetura: a diretiva 'use client' define uma fronteira (boundary) na árvore de componentes. Todos os componentes importados dentro de um Client Component também se tornam parte do bundle do cliente, mesmo que não tenham a diretiva explicitamente. Por isso, o padrão recomendado é empurrar os Client Components para as folhas da árvore (leaf components), mantendo o máximo possível de lógica nos Server Components para reduzir o JavaScript enviado ao cliente. Outro erro comum é tentar passar funções não serializáveis (como callbacks arbitrários) como props de um Server Component para um Client Component — apenas dados serializáveis em JSON são permitidos nessa fronteira."}] 3f:T527,'use client'; import { useState, useEffect } from 'react'; interface Product { id: number; name: string; price: number; } interface ProductCardProps { product: Product; onAddToCart: (id: number) => void; } export function ProductCard({ product, onAddToCart }: ProductCardProps) { const [quantity, setQuantity] = useState(1); const [addedFeedback, setAddedFeedback] = useState(false); useEffect(() => { if (addedFeedback) { const timer = setTimeout(() => setAddedFeedback(false), 2000); return () => clearTimeout(timer); } }, [addedFeedback]); function handleAdd() { onAddToCart(product.id); setAddedFeedback(true); } return (

{product.name}

R$ {product.price.toFixed(2)}

{quantity}

); }