DOMINICODE

Server Actions en Next.js y su Impacto en el Reclutamiento

server-actions-nextjs-reclutamiento

Written by

Dominicode

in

, ,

Server 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 (

More posts