Componentes de servidor y componentes de cliente
Comprenda los React Server Components, cuándo añadir la directiva 'use client' y cómo combinar HTML renderizado en el servidor con islas de cliente interactivas.
Componentes de servidor y componentes de cliente es una lección gratuita de Frontend 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 Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.
Dos mundos en una sola aplicación
Los React Server Components (RSC) permiten dividir un árbol entre partes renderizadas en el servidor y partes interactivas en el cliente. En el App Router de Next.js, los componentes son de servidor de forma predeterminada; opte por componentes de cliente con 'use client'.
Qué hacen los componentes de servidor
Los componentes de servidor se ejecutan únicamente en el servidor. Pueden: obtener datos directamente, acceder al sistema de archivos, utilizar secretos exclusivos del servidor y renderizar HTML sin enviar React al cliente. No pueden: utilizar hooks, gestionar estado ni manejar eventos.
Qué hacen los componentes de cliente
Los componentes de cliente se ejecutan en el servidor para SSR (HTML inicial) y en el cliente para proporcionar interactividad. Pueden utilizar useState, useEffect, controladores de eventos y API del navegador.
El valor predeterminado es el servidor
En el App Router de Next.js, todos los componentes son componentes de servidor de forma predeterminada. Esto es excelente: la mayor parte de su aplicación utiliza renderizado estático.
// app/posts/page.tsx — Server Component by default
export default async function Posts() {
const posts = await fetch('https://api/posts').then(r => r.json());
return (
<ul>
{posts.map(p => <li key={p.id}>{p.title}</li>)}
</ul>
);
}Optar por el cliente
Añada 'use client' al principio de un archivo para marcar sus componentes (y sus importaciones) como componentes de cliente.
// app/Counter.tsx
'use client';
import { useState } from 'react';
export default function Counter() {
const [n, setN] = useState(0);
return <button onClick={() => setN(n + 1)}>{n}</button>;
}Componer componentes de servidor y de cliente
Los componentes de servidor pueden renderizar componentes de cliente, pero los componentes de cliente no pueden importar componentes de servidor. Pase el contenido renderizado en el servidor como children a los wrappers de cliente.
// app/page.tsx — Server
import ClientShell from './ClientShell';
import ServerWidget from './ServerWidget';
export default function Home() {
return (
<ClientShell>
<ServerWidget />
</ClientShell>
);
}Por qué es importante este patrón
Paquetes de JS más pequeños: solo los componentes de cliente se envían al navegador. Acceso directo a bases de datos y archivos: no se necesita una capa de API para los datos de solo lectura. Mejor SEO y un LCP más rápido: el HTML llega completamente renderizado.
Reglas de los límites del cliente
Una vez que un archivo se marca con 'use client', todos los componentes de ese archivo y sus elementos secundarios importados se convierten en componentes de cliente. 'use client' marca el límite entre el servidor y el cliente.
Server Actions
Las funciones marcadas con 'use server' se ejecutan únicamente en el servidor, pero pueden invocarse desde componentes de cliente, como RPC. Suelen utilizarse para enviar formularios y realizar mutaciones.
// app/actions.ts
'use server';
import { revalidatePath } from 'next/cache';
export async function createPost(formData: FormData) {
const title = formData.get('title') as string;
await db.posts.create({ data: { title } });
revalidatePath('/posts');
}
// In a Client form component:
<form action={createPost}>
<input name="title" />
<button>Create</button>
</form>Pasar props del servidor al cliente
Las props que se pasan del servidor al cliente deben ser serializables como JSON: no se permiten funciones, clases ni objetos Date con estructuras personalizadas. Conviértalos antes de pasarlos.
Identificar cada tipo
Revise las importaciones: useState, useEffect y los controladores onClick obligan a que un componente sea un componente de cliente. La presentación pura de datos puede permanecer en el servidor.
Mejoras de rendimiento
Los componentes de servidor reducen drásticamente el tamaño del paquete de JS. Una página con contenido mayormente estático y algunos widgets interactivos solo envía el JS de las partes interactivas; en ocasiones, el paquete es un 90 % más pequeño.
Comprobación rápida
¿Qué hook de React NO se permite en un componente de servidor de Next.js?
Resumen: servidor frente a cliente
Componentes de servidor: se ejecutan únicamente en el servidor, permiten async/await, no admiten hooks, estado ni controladores, y generan paquetes más pequeños. Componentes de cliente: se activan con 'use client' y permiten interactividad con useState/useEffect/eventos. El servidor puede renderizar componentes de cliente; el cliente no puede importar componentes de servidor, aunque puede recibirlos como children. Server Actions ('use server') para mutaciones con estilo RPC.
Preguntas frecuentes
¿La lección «Componentes de servidor y componentes de cliente» es gratis?
Sí — el texto completo de «Componentes de servidor y componentes de cliente» 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 Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Componentes de servidor y componentes de cliente»?
Comprenda los React Server Components, cuándo añadir la directiva 'use client' y cómo combinar HTML renderizado en el servidor con islas de cliente interactivas. Practicas Frontend 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 Frontend Academy?
No se requiere experiencia previa. Frontend 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 y componentes de cliente»?
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 Frontend Academy?
Sí. Cada lección de Frontend 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
- Pages Router frente a App Router
- Componentes de servidor y componentes de cliente
- SSG, SSR e ISR
- Rutas de API y middleware de Next.js