Avanzadoreact
React Server Components (RSC) y Server Actions
El nuevo estándar en React y Next.js: componentes que se ejecutan exclusivamente en el servidor sin añadir JavaScript al cliente.
Server Components vs Client Components
Por defecto en Next.js (App Router), todos los componentes son Server Components. Tienen acceso directo a la base de datos y al sistema de archivos, y su código fuente jamás se descarga en el navegador del usuario, reduciendo drásticamente el peso del bundle.
jsx
1// Este componente corre 100% en el servidor
2// No usa "use client", no añade JS al cliente
3import db from '@/lib/database';
4
5export default async function ListaUsuarios() {
6 const usuarios = await db.user.findMany(); // Consulta directa y segura
7
8 return (
9 <ul>
10 {usuarios.map(u => (
11 <li key={u.id}>{u.nombre} - {u.email}</li>
12 ))}
13 </ul>
14 );
15}Server Actions: Mutaciones seguras sin endpoints API manuales
Las Server Actions son funciones asíncronas marcadas con
"use server" que se ejecutan en el servidor en respuesta a formularios o eventos de usuario, con validación nativa y revalidación de caché (revalidatePath).typescript
1// app/actions.ts
2"use server";
3import { revalidatePath } from 'next/cache';
4
5export async function crearPost(formData: FormData) {
6 const titulo = formData.get('titulo') as string;
7 await db.post.create({ data: { titulo } });
8 revalidatePath('/blog'); // Actualiza la caché instantáneamente
9}Prueba lo aprendido
Escribe código y ejecútalo directamente en el navegador.
Live Sandbox (JAVASCRIPT)
Output