Server Components sin mitos: cuándo sí y cuándo no

Llevo un año usando Server Components en producción. Esta es la regla que acabé usando con el equipo: por defecto en el servidor; al cliente solo lo que necesita interacción.

Cuándo sí#

• Contenido que se lee y no se toca: artículos, fichas, listados
• Consultas a la base de datos que no quieres exponer en una API
• Dependencias pesadas que solo sirven para pintar (Markdown, resaltado de código)

Cuándo no#

• Cualquier cosa con estado local: formularios, pestañas, menús
• Lo que depende del navegador: localStorage, tamaño de ventana, geolocalización

Un ejemplo real#

1export default async function Ficha({ id }: { id: string }) {2  const producto = await db.producto.find(id); // en el servidor3  return (4    <article>5      <h1>{producto.nombre}</h1>6      <BotonCarrito id={id} /> {/* lo único de cliente */}7    </article>8  );9}

La página pesa lo que pesa el botón. Todo lo demás llega como HTML.