Server vs Client Components: regla practica
Server Components vs Client Components
En el App Router, todos los componentes son Server Components por defecto. Se renderizan en el servidor, no envían su código JavaScript al navegador y pueden acceder directamente a la base de datos, leer archivos o usar secretos. Solo cuando un componente necesita interactividad del navegador lo conviertes en Client Component añadiendo la directiva "use client" en la primera línea del archivo.
La regla práctica
Mantén todo como Server Component salvo que necesites una de estas cosas en el navegador:
- Estado:
useState,useReducer. - Efectos:
useEffect,useLayoutEffect. - Eventos del usuario:
onClick,onChange,onSubmit. - APIs del navegador:
localStorage,window, geolocalización.
Atención
Si un componente es Client, todos sus hijos importados también se ejecutan en el cliente. Por eso conviene empujar el "use client" a las hojas del árbol (un botón, un acordeón) y no a páginas enteras.
Patrón recomendado: islas de interactividad
Renderiza la página en el servidor y pasa los datos como props a pequeños Client Components que solo manejan la interacción:
// page.tsx (Server Component, sin "use client")
import LikeButton from "./LikeButton";
export default async function Post() {
const post = await db.post.findFirst(); // acceso directo a DB
return (
<article>
<h1>{post.title}</h1>
<LikeButton initial={post.likes} /> {/* isla client */}
</article>
);
}// LikeButton.tsx
"use client";
import { useState } from "react";
export default function LikeButton({ initial }) {
const [likes, setLikes] = useState(initial);
return <button onClick={() => setLikes(likes + 1)}>👍 {likes}</button>;
}"use client"
Directiva al inicio del archivo que marca un límite: ese componente y los que importe se ejecutan en el navegador.
¿Cuál de estos casos obliga a usar "use client"?
Ejercicio práctico
Objetivo: aplicar el patrón de islas reduciendo JavaScript en el cliente.
- Toma una página que sea Client Component completo.
- Identifica qué parte realmente necesita interactividad (un botón, un menú).
- Quita el
"use client"de la página y déjala como Server Component. - Extrae solo la parte interactiva a su propio archivo con
"use client"y pásale los datos por props.
Entregable: el antes y el después, indicando qué quedó en servidor y qué en cliente.
Para recordar
- Server por defecto; Client solo para estado, efectos, eventos o APIs del navegador.
"use client"se contagia a los hijos: ponlo en las hojas del árbol.- El patrón de islas mantiene el HTML rápido y la interactividad mínima.
