Server Components vs Client Components (el concepto)

Durante años, TODO tu React corría en el navegador: se descargaba como JavaScript, se ejecutaba en la máquina del usuario, y ahí armaba la UI. React 19 formaliza un cambio profundo: algunos componentes corren en el SERVIDOR y nunca llegan al navegador como código. Son los Server Components. Entender la frontera entre lo que corre en el servidor y lo que corre en el cliente es el modelo mental más importante del React moderno —y la base de Next.js, que verás en el SC-07—. Hoy lo aclaras a nivel de concepto.

La cocina y el comedor

Dos lugares donde corre el código

La directiva "use client"

"use client" es una línea al principio del archivo que marca la frontera: de ahí para abajo (ese componente y los que importa) corre en el navegador.

// ── ListaGastos.tsx ── (Server Component: sin "use client")
// Corre en el servidor. Puede leer la BD directamente y ser async.
import { Contador } from "./Contador";

export default async function ListaGastos() {
const gastos = await db.gastos.findAll(); // acceso directo a datos, sin API
return (
  <div>
    <h2>Gastos</h2>
    <ul>{gastos.map((g) => <li key={g.id}>{g.nombre}</li>)}</ul>
    <Contador /> {/* una isla interactiva dentro de UI de servidor */}
  </div>
);
}

"use client"; // ← la frontera: de aquí para abajo, corre en el navegador
import { useState } from "react";

export function Contador() {
const [n, setN] = useState(0); // estado → obligatorio ser Client Component
return <button onClick={() => setN(n + 1)}>Clics: {n}</button>;
}

ListaGastos es un Server Component: es async, lee la base de datos directamente y su código nunca llega al navegador —solo su HTML resultante—. Dentro, incrusta <Contador>, que SÍ lleva "use client" porque usa useState y onClick. El patrón mental: UI de servidor (barata, con datos) salpicada de "islas" de cliente (interactivas) donde de verdad hacen falta. El servidor arma el grueso de la página; el cliente solo hidrata las partes vivas.

Cuándo DEBE ser de cliente

Mini-reto

Clasifica (en papel) estos componentes de una app de gastos como Server o Client, y justifica: (a) <TotalDelMes> que recibe un número por props y lo muestra formateado; (b) <FormularioGasto> con inputs controlados y onSubmit; (c) <ListaGastos> que hace await db.gastos.findAll(); (d) <MenuUsuario> que abre/cierra con useState. Para cada uno di si lleva "use client" y por qué. Regla: ¿usa estado, efectos, eventos o APIs del navegador? Entonces es de cliente.

Qué sigue

Cierras el módulo con la novedad que más código BORRA: el COMPILADOR de React. Durante años optimizabas los re-renders a mano con useMemo, useCallback y memo —un dolor constante—. El compilador lo hace por ti, automáticamente. La próxima lección explica primero por qué existían esas herramientas (para que entiendas qué te están quitando de encima) y luego cómo el compilador las jubila.