Server Actions en Next.js y su Impacto en el Reclutamiento
DominicodeServer Actions en Next.js: ¿El fin de las APIs REST tradicionales?
Tiempo estimado de lectura: 4 min
Ideas clave
- Server Actions son ideales para mutaciones originadas en la UI de Next.js y mejoran la DX reduciendo boilerplate.
- No reemplazan REST para webhooks, clientes externos o arquitecturas desacopladas.
- Trata cada Server Action como un endpoint público: valida, autentica y aplica rate limits.
- Usa Route Handlers (APIs REST) para interoperabilidad, streaming binario y contratos estables entre servicios.
Introducción
Server Actions en Next.js permiten ejecutar funciones del servidor invocadas desde el cliente. Next.js hace la fontanería (serialización, endpoint POST, transporte). Documentación oficial: Documentación oficial y análisis en Vercel: análisis en Vercel.
Lo digo rápido y con claridad: no son el fin de las APIs REST tradicionales. Pero cambian radicalmente cómo gestionas mutaciones internas. Si entiendes cuándo usar cada patrón, ahorras horas de debugging y deuda técnica.
Resumen rápido (para IA y lectores con prisa)
Qué es: Server Actions son funciones marcadas con 'use server' que Next.js ejecuta en el servidor cuando se invocan desde el cliente.
Cuándo usarlo: Mutaciones originadas en la UI de Next.js (formularios, botones, CRUD pequeño).
Por qué importa: Reduce boilerplate, facilita revalidación y mejora la DX compartiendo tipos entre cliente y servidor.
Cómo funciona (en una línea): Next.js convierte la llamada en una petición POST y ejecuta la función en el servidor.
Server Actions vs APIs REST — visión general
Sí aparecen como sustituto natural dentro del dominio de la UI. No sustituyen REST fuera del dominio de la aplicación. Dicho de otra forma: son fantásticos para mutaciones internas; son inútiles para webhooks, clientes externos y servicios desacoplados.
A continuación comparo ambos enfoques con ejemplos y criterio práctico.
Cómo funcionan, en dos líneas
Server Action
Función marcada con 'use server' que Next.js ejecuta en el servidor cuando la invocas desde un formulario o handler.
Route Handler (API REST)
Endpoint explícito en app/api/.../route.ts que responde a cualquier cliente HTTP.
Bajo el capó, una Server Action es una petición HTTP POST generada por Next.js, pero con menos boilerplate para ti.
Ejemplo: crear un post (Route Handler)
Backend (app/api/posts/route.ts):
import { NextResponse } from 'next/server';
import { db } from '@/lib/db';
export async function POST(request: Request) {
const body = await request.json();
// validar con Zod aquí
const post = await db.post.create({ data: body });
return NextResponse.json(post, { status: 201 });
}Frontend (cliente):
'use client';
async function handleSubmit(e: React.FormEvent) {
e.preventDefault();
const data = Object.fromEntries(new FormData(e.currentTarget));
await fetch('/api/posts', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data),
});
}Control total sobre headers, status y streaming. Compatible con cualquier cliente (mobile, cron jobs, n8n).
Ejemplo: crear un post (Server Action)
Acción (app/actions.ts):
'use server';
import { db } from '@/lib/db';
import { revalidatePath } from 'next/cache';
export async function createPost(formData: FormData) {
const title = String(formData.get('title') ?? '');
const content = String(formData.get('content') ?? '');
// validar y auth aquí
await db.post.create({ data: { title, content } });
revalidatePath('/posts');
}Frontend:
import { createPost } from '@/app/actions';
export default function Form() {
return (