Server Actions: forms sin API extra
Server Actions: formularios sin API extra
Las Server Actions son funciones que se ejecutan en el servidor pero que puedes invocar directamente desde un formulario o un evento del cliente, sin crear endpoints de API a mano. Se marcan con la directiva "use server" y son la forma moderna de mutar datos en el App Router: el formulario envía, la función valida y escribe en la base de datos, y luego refrescas la UI.
Anatomía de una Server Action
// app/tareas/actions.ts
"use server";
import { z } from "zod";
import { revalidatePath } from "next/cache";
import { redirect } from "next/navigation";
const schema = z.object({
titulo: z.string().min(1, "El título es obligatorio"),
});
export async function crearTarea(formData: FormData) {
const parsed = schema.safeParse({
titulo: formData.get("titulo"),
});
if (!parsed.success) {
return { error: parsed.error.flatten().fieldErrors };
}
await db.tarea.create({ data: parsed.data });
revalidatePath("/tareas"); // refresca la lista
redirect("/tareas");
}Conectarla a un formulario
Pasa la acción al atributo action del formulario. No necesitas onSubmit ni fetch:
// app/tareas/page.tsx (Server Component)
import { crearTarea } from "./actions";
export default function Page() {
return (
<form action={crearTarea}>
<input name="titulo" placeholder="Nueva tarea" />
<button type="submit">Crear</button>
</form>
);
}Atención
Nunca confíes en los datos del formulario. Valida siempre en el servidor (aquí con Zod) antes de escribir en la base de datos. La validación del navegador es solo una conveniencia para el usuario, no una barrera de seguridad.
¿Qué hace revalidatePath?
Invalida la cache de la ruta indicada para que la próxima vez que se visite muestre los datos actualizados. Sin él, podrías crear una tarea y no verla hasta recargar manualmente.
¿Dónde debes validar los datos de un formulario que crea registros?
Ejercicio práctico
Objetivo: crear un formulario funcional con Server Action y validación.
- Crea un esquema con Zod para un recurso simple (por ejemplo un comentario con texto mínimo de 3 caracteres).
- Escribe una Server Action con
"use server"que valide consafeParse. - Si la validación falla, devuelve los errores; si pasa, escribe en la DB y llama a
revalidatePath. - Conecta la acción al atributo
actionde un<form>y prueba enviar datos válidos e inválidos.
Entregable: captura del formulario rechazando un envío inválido y aceptando uno válido.
Para recordar
- Las Server Actions (
"use server") mutan datos sin endpoints manuales. - Patrón: validar (Zod) → escribir DB →
revalidatePath→redirect. - La validación de servidor es obligatoria; la del cliente es solo comodidad.
