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 en-têtes et du JSON dans les deux sens, pour déplacer une chaîne de caractères d’un formulaire vers une base de données.

Une Server Action supprime tout cela. Écris une fonction asynchrone 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 les fondamentaux : ces champs de formulaire sont non contrôlés. Pas de useState, pas de value, pas de onChange : le navigateur conserve le texte, et l’attribut name est la manière dont l’action le retrouve lors de la soumission.