Che cos'è un'azione server

Ora puoi leggere i dati sul server. È il momento dell'altra metà: modificarli.

Fino a poco tempo fa, per salvare una riga di testo serviva una quantità sorprendente di passaggi. Scrivevi 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 });
}

…poi l'hai chiamata dal browser:

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

Due file, un URL, un metodo, intestazioni e JSON in entrambe le direzioni, per spostare una stringa da un modulo a un database.

Una Server Action elimina tutto. Scrivi una funzione async in un file la cui prima riga è 'use server':

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

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

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

…e passa quella funzione a un modulo:

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

Questo è tutto. Vale la pena menzionare tre dettagli:

• 'use server' deve essere la prima riga del file: lo stesso tipo di indicatore di 'use client', ma nella direzione opposta. Indica che tutto ciò che viene esportato qui viene eseguito sul server.
• Il corpo della funzione non raggiunge mai il browser. Le credenziali del tuo database sono al sicuro al suo interno: il browser riceve solo un riferimento che può chiamare.
• Non hai mai scritto un URL. Next.js crea l'endpoint per te; action={addItem} è il collegamento.

Una differenza rispetto a Fundamentals: questi campi del modulo sono non controllati. Nessun useState, nessun value, nessun onChange: il browser conserva il testo e l'attributo name è il modo in cui l'azione lo trova all'invio.