Next.js 13: Elegir entre Servidor y Cliente
easy⏱ 5 mincoursenextjs
Pregunta qué necesita el componente, no qué renderiza
La división no trata de cómo se ve un componente — un botón puede vivir en cualquiera de los dos lados. Se trata de capacidades: useState/useReducer, useEffect, onClick/onChange, window/localStorage → Cliente. Acceso directo a BD/filesystem, secretos/API keys, await al inicio del componente, cero interactividad → Servidor.
// Server: fetches directly, no interactivity, secret stays on the server
async function OrderSummary({ orderId }) {
const order = await db.order.findUnique({ where: { id: orderId } });
return <p>Total: {order.total}</p>;
}
// Client: needs useState + onClick
'use client';
function QuantityStepper({ initial }) {
const [qty, setQty] = useState(initial);
return <button onClick={() => setQty(qty + 1)}>{qty}</button>;
}
En caso de duda, ve al servidor
Un error común es poner 'use client' en toda una página porque un botón necesita onClick. En vez de eso, mantén la página como Componente de Servidor y extrae solo la pieza interactiva — como QuantityStepper arriba — en su propio Componente de Cliente pequeño. Empuja el límite de cliente lo más abajo posible en el árbol.
Clasifica las características
Para cada tarjeta de característica, haz clic en Server o Client. useState, onClick, localStorage y useEffect van en el cliente; await db.query(), leer process.env.SECRET y marcado estático van en el servidor. Tu puntaje se actualiza en vivo.