Was ist eine Server Action?

Sie können jetzt Daten auf dem Server lesen. Zeit für die andere Hälfte: sie zu ändern.

Bis vor Kurzem erforderte das Speichern einer einzelnen Textzeile überraschend viel Aufwand. Man schrieb einen Endpunkt:

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

…und diese dann vom Browser aus aufgerufen:

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

Zwei Dateien, eine URL, eine method, headers und JSON in beide Richtungen, um einen String von einem form in eine Datenbank zu übertragen.

Eine Server Action löscht alles davon. Schreibe eine asynchrone Funktion in eine Datei, deren erste Zeile 'use server' ist:

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

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

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

…und übergib diese Funktion an ein Formular:

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

Das ist schon alles. Drei Details sind erwähnenswert:

• 'use server' muss die erste Zeile der Datei sein: dieselbe Art von Marker wie 'use client', nur in die andere Richtung. Er besagt: Alles, was hier exportiert wird, läuft auf dem Server.
• Der body der function erreicht niemals den Browser. Ihre Datenbank-Zugangsdaten sind darin sicher: Der Browser erhält nur eine Referenz, die er aufrufen kann.
• Sie haben nie eine URL geschrieben. Next.js erstellt den Endpunkt für Sie; action={addItem} ist die Verknüpfung.

Ein Unterschied zu den Grundlagen: Diese Formulareingaben sind uncontrolled. Kein useState, kein value, kein onChange: Der Browser speichert den Text, und über das name-Attribut findet die Action ihn beim Absenden.