Czym jest akcja serwerowa

Możesz już odczytywać dane na serwerze. Czas na drugą połowę: zmienianie ich.

Do niedawna zapisanie jednej linijki tekstu wymagało zaskakująco wielu formalności. Pisało się endpoint:

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

…a następnie wywołano ją z przeglądarki:

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

Dwa pliki, adres URL, metoda, nagłówki i JSON w obie strony, aby przenieść jeden ciąg znaków z formularza do bazy danych.

Akcja serwerowa usuwa to wszystko. Zapisz funkcję asynchroniczną w pliku, którego pierwszym wierszem jest 'use server':

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

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

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

…i przekaż tę funkcję do formularza:

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

To już wszystko. Warto wymienić trzy szczegóły:

• 'use server' musi być pierwszą linią pliku: to ten sam rodzaj znacznika co 'use client', wskazujący w przeciwnym kierunku. Mówi: wszystko, co jest tu eksportowane, działa na serwerze.
• Treść funkcji nigdy nie trafia do przeglądarki. Dane logowania do bazy danych są w niej bezpieczne: przeglądarka otrzymuje tylko referencję, którą może wywołać.
• Nie trzeba pisać adresu URL. Next.js tworzy punkt końcowy za Ciebie; action={addItem} łączy elementy.

Jedna różnica w porównaniu z kursem Fundamentals: te pola formularza są niekontrolowane. Bez useState, bez value i bez onChange: przeglądarka przechowuje tekst, a atrybut name pozwala akcji znaleźć go podczas wysyłania formularza.