Server Components y Client Components en profundidad

La frontera servidor-cliente debe seguir la interacción, no el tamaño visual del componente. Una lista de reseñas puede ser de servidor porque solo presenta datos; un selector de valoración necesita estado y eventos en el cliente. Separarlos reduce JavaScript enviado y hace visible dónde se toman decisiones.

Ejemplo resuelto

// components/Selector.tsx
'use client';
import { useState } from 'react';
export function Selector() {
  const [valor, setValor] = useState(1);
  return <button onClick={() => setValor(actual => actual + 1)}>Cantidad: {valor}</button>;
}

La página de servidor importa Selector, pero conserva la consulta y el texto estático.

Un Client Component puede producir HTML inicial en el servidor y luego hidratarse; “cliente” identifica la frontera de interacción y dependencias, no significa ausencia de HTML inicial. Los secretos y conexiones de base de datos se quedan en módulos de servidor y no se pasan por props al selector.

Pruébalo

1. Lista tres datos que solo se leen.

2. Separa un único control que cambie en pantalla.

3. Pasa por props solo valores serializables.

4. Prueba el control con dos clics.

Comprueba tu resultado

Error frecuente: usar useState en un componente de servidor. Corrección: crea una frontera cliente explícita y pequeña.

Ejercicio: inicia el selector en 1 y pulsa dos veces; debe mostrar Cantidad: 3, mientras el nombre del producto sigue procediendo del componente de servidor.