Componentes de servidor frente a componentes de cliente en Next.js
Decida cuándo añadir 'use client' y cómo combinar árboles de servidor y de cliente.
Componentes de servidor frente a componentes de cliente en Next.js es una lección gratuita de React Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de React Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de React Academy incluye 4 lecciones en total.
El valor predeterminado: componentes de servidor
En App Router, todos los componentes son componentes de servidor de forma predeterminada. Se renderizan en el servidor, no envían JavaScript al cliente y pueden acceder directamente a bases de datos, variables de entorno y al sistema de archivos.
Cómo optar por componentes de cliente
Añada 'use client' al principio de un archivo para convertirlo en un componente de cliente. Todas sus importaciones también pasan a ejecutarse en el cliente: se crea un límite del cliente.
'use client';
import { useState } from 'react';
export function Counter() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}Qué pueden hacer los componentes de servidor
Los componentes de servidor pueden esperar (await) datos directamente, leer variables de entorno, acceder al sistema de archivos e importar paquetes grandes exclusivos del servidor sin aumentar el bundle del cliente.
// app/products/page.tsx — Server Component
export default async function ProductsPage() {
const products = await db.query('SELECT * FROM products');
return (
<ul>
{products.map(p => <li key={p.id}>{p.name}</li>)}
</ul>
);
}Qué no pueden hacer los componentes de servidor
Los componentes de servidor no pueden utilizar hooks (useState, useEffect), API del navegador ni controladores de eventos. Para ello se necesita 'use client'.
Composición de componentes de servidor y de cliente
Pase el resultado de un componente de servidor como props o children a los componentes de cliente. El patrón recomendado es mantener la obtención de datos en los componentes de servidor y la interactividad en los componentes de cliente.
// Server Component (no 'use client')
async function ProductPage({ id }) {
const product = await getProduct(id); // direct DB call
return <AddToCartButton product={product} />; // client component
}
// Client Component
'use client';
function AddToCartButton({ product }) {
const [added, setAdded] = useState(false);
return <button onClick={() => { addToCart(product); setAdded(true); }}>{added ? 'Added!' : 'Add to cart'}</button>;
}Pasar elementos secundarios del servidor al cliente
Un componente de servidor puede pasar JSX como children a un componente de cliente. Los elementos secundarios se siguen renderizando en el servidor; el envoltorio del cliente añade la interactividad.
// Client wrapper — Modal with open/close state
'use client';
function Modal({ children }) {
const [open, setOpen] = useState(false);
return (
<>
<button onClick={() => setOpen(true)}>Open</button>
{open && <dialog>{children}</dialog>}
</>
);
}
// Server Component — passes server-fetched content into client modal
async function Page() {
const content = await fetchContent();
return <Modal><ServerRenderedContent data={content} /></Modal>;
}El límite del cliente
Añadir 'use client' hace que el archivo y todas sus importaciones secundarias se ejecuten en el cliente. Para mantener un elemento secundario como componente de servidor, páselo como prop o slot en lugar de importarlo directamente.
Patrones de obtención de datos
Obtenga los datos en componentes de servidor y páselos hacia abajo. Evite obtenerlos en componentes de cliente siempre que sea posible: aumenta el peso del bundle del cliente y duplica la lógica del servidor.
// Good: fetch in server, pass to client
async function Page() {
const user = await getUser();
return <UserProfile user={user} />; // client component
}
// Avoid: fetch in client
'use client';
function UserProfile() {
const { data } = useSWR('/api/user', fetcher); // network request from browser
}Utilidades exclusivas del servidor
El paquete server-only genera un error de compilación si un módulo exclusivo del servidor se importa accidentalmente en un componente de cliente.
// lib/db.ts
import 'server-only'; // throws at build time if imported in 'use client' file
export const db = createDbClient(process.env.DB_URL);Compartir estado entre el servidor y el cliente
Los componentes de servidor no pueden mantener estado. Para compartir con componentes de cliente interactivos el estado obtenido del servidor, páselo como props en el renderizado inicial y gestione las actualizaciones en el cliente.
Cuándo añadir use client
Añada 'use client' cuando necesite: hooks (useState, useEffect), eventos del navegador (onClick), API del navegador (localStorage, window) o bibliotecas de terceros del lado del cliente.
Comprobación rápida
¿Qué debe añadir al principio de un archivo para utilizar useState u onClick en el App Router de Next.js?
Resumen
Todos los componentes de App Router son componentes de servidor de forma predeterminada: no generan un bundle de JS y tienen acceso directo a los datos. Añada 'use client' únicamente donde necesite interactividad. Componga pasando los datos obtenidos en el servidor como props o elementos secundarios a envoltorios de cliente, y mantenga el límite del cliente lo más cerca posible de las hojas.
Preguntas frecuentes
¿La lección «Componentes de servidor frente a componentes de cliente en Next.js» es gratis?
Sí — el texto completo de «Componentes de servidor frente a componentes de cliente en Next.js» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de React Academy, actualiza a CoddyKit PRO. El curso de React Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Componentes de servidor frente a componentes de cliente en Next.js»?
Decida cuándo añadir 'use client' y cómo combinar árboles de servidor y de cliente. Practicas React Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar React Academy?
No se requiere experiencia previa. React Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Componentes de servidor frente a componentes de cliente en Next.js»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de React Academy?
Sí. Cada lección de React Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Convenciones de archivos de App Router
- Componentes de servidor frente a componentes de cliente en Next.js
- Rutas dinámicas y grupos de rutas
- API de metadatos y SEO en App Router