Directiva ‘use server’ – Definirea acțiunilor de server (Server Actions) în Next.js

Permite rularea funcțiilor asincrone direct pe server, apelabile transparent din formulare HTML sau din butoane client fără a scrie manual API Routes.

Sintaxă
async function actiuneFormular(formData: FormData) {
  'use server';
  const nume = formData.get('nume');
  await db.salveaza(nume);
}

Ce face Directiva 'use server' - Definirea acțiunilor de server (Server Actions)

Server Actions revoluționează modul de trimitere a formularelor și mutațiile de date în Next.js.

Prin adăugarea directivei 'use server' la începutul unei funcții (sau la începutul unui fișier separat `actions.ts`), Next.js creează automat un endpoint securizat POST sub capotă.

Poate fi asociată direct cu atributul `action` al unui formular HTML: `

`. Funcționează chiar și atunci când JavaScript este dezactivat în browser (Progressive Enhancement).

Exemple

Exemplul 1: Salvarea unui comentariu direct dintr-un formular cu Server Action

Execută logica direct pe server și revalidează cache-ul paginii.

import { revalidatePath } from 'next/cache';

export default function Articol() {
  async function adaugaComentariu(formData: FormData) {
    'use server';
    const mesaj = formData.get('comentariu') as string;
    
    // Salvare securizată direct în baza de date:
    await salveazaInBaza(mesaj);
    
    // Reîmprospătează lista fără refresh complet:
    revalidatePath('/articole/1');
  }

  return (
    <form action={adaugaComentariu}>
      <textarea name="comentariu" required placeholder="Scrie un comentariu..." />
      <button type="submit">Trimite</button>
    </form>
  );
}

Ieșire în terminal

Formularul trimite datele direct pe server și reîncarcă conținutul instant.

Greșeli frecvente

  • Confuzia între Server Components (randează UI pe server) și ‘use server’ (marchează exclusiv funcții de mutație/acțiune asincrone pe server).

Comenzi înrudite