Qu'est-ce qu'une Server Action

Vous pouvez maintenant lire les données sur le server. Il est temps d'aborder l'autre moitié : les modifier.

Jusqu'à récemment, enregistrer une ligne de texte nécessitait une quantité surprenante de cérémonial. Vous écriviez 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 });
}

…puis l'avons appelée depuis le navigateur :

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

Deux fichiers, une URL, une méthode, des headers, et du JSON dans les deux sens, pour déplacer une chaîne de caractères d'un form à une base de données.

Une Server Action supprime tout cela. Écrivez une fonction async dans un fichier dont la première ligne est 'use server' :

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

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

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

…et passer cette fonction à un formulaire :

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

C'est tout ce qu'il y a à faire. Trois détails méritent d'être soulignés :

• 'use server' doit être la première ligne du fichier : c'est le même type de marqueur que 'use client', mais dans le sens inverse. Il indique que tout ce qui est exporté ici s'exécute sur le server.
• Le body de la function n'atteint jamais le navigateur. Vos identifiants de base de données y sont en sécurité : le navigateur ne reçoit qu'une référence qu'il peut appeler.
• Vous n'avez jamais écrit d'URL. Next.js crée le point de terminaison pour vous ; action={addItem} fait le raccordement.

Un contraste avec Fundamentals : ces champs de form sont non contrôlés. Pas de useState, pas de value, pas de onChange : le navigateur conserve le text, et l'attribut name est la façon dont l'action le trouve lors du submit.