¿Qué es una Server Action?

Ahora ya puedes leer datos en el servidor. Es hora de la otra mitad: cambiarlos.

Hasta hace poco, guardar una línea de texto requería una cantidad sorprendente de ceremonia. Escribías un endpoint:

// app/api/items/route.js
export async function POST(request) {
    const body = await request.json();
    saveItem(body.text);
    return Response.json({ ok: true });
}

…después lo llamamos desde el navegador:

await fetch('/api/items', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ text }),
});

Dos archivos, una URL, un method, headers y JSON en ambas direcciones, para mover una cadena desde un form a una base de datos.

Una Server Action elimina todo esto. Escribe una función asíncrona (async) en un archivo cuya primera línea sea 'use server':

// app/actions.js
'use server';

import { saveItem } from '../lib/db';

export async function addItem(formData) {
    saveItem(formData.get('text'));
}

…y pasar esa función a un formulario:

<form action={addItem}>
    <input name="text" />
    <button type="submit">Add</button>
</form>

Eso es todo. Vale la pena mencionar tres detalles:

• 'use server' debe ser la primera línea del archivo: el mismo tipo de marcador que 'use client', apuntando en la otra dirección. Dice: todo lo que se exporte aquí se ejecuta en el servidor.
• El cuerpo de la función nunca llega al navegador. Las credenciales de tu base de datos están seguras dentro de él: el navegador solo recibe una referencia que puede llamar.
• Nunca escribiste una URL. Next.js crea el endpoint por ti; action={addItem} es la conexión.

Un contraste con Fundamentos: estos inputs de formulario son no controlados. Sin useState, sin value, sin onChange: el navegador conserva el texto, y el atributo name es como la action lo encuentra al hacer submit.