Server Actions in React 19 e Next.js

Le Server Actions sono funzioni asincrone che vengono eseguite sul server, non nel browser. Sono contrassegnate dalla direttiva 'use server', posizionata all'inizio del file o del corpo della funzione, per indicare al framework che questa funzione non deve mai essere eseguita lato client.

Poiché le Server Actions vengono eseguite sul server, hanno accesso all'intero contesto del server: connessioni al database, segreti dell'ambiente, dati della sessione e risorse del file system. Questo è fondamentalmente diverso dai componenti client, che possono accedere solo a ciò che il browser espone.

Quando un componente client chiama una Server Action, Next.js effettua automaticamente una richiesta HTTP POST a uno speciale endpoint RSC. Il framework gestisce tutta la serializzazione degli argomenti e il livello di trasporto, quindi non è mai necessario scrivere manualmente chiamate fetch() per queste mutazioni.

Le Server Actions eliminano la necessità di usare le route API in molti scenari di mutazione. L'action stessa è l'endpoint: si definisce la logica una sola volta come funzione server e la si chiama direttamente dal componente client come se fosse una funzione locale.

Le Server Actions erano inizialmente un concetto specifico di Next.js, ma React 19 le eleva a funzionalità di prima classe di React. Questo significa che bundler e framework diversi da Next.js possono implementare lo stesso pattern seguendo la specifica di React.

Le Server Actions sono sperimentali nella RC di React 19, ma sono stabili nell'App Router di Next.js 14 e versioni successive fin dalla loro introduzione. Se oggi si sta sviluppando un'applicazione in produzione con l'App Router di Next.js, le Server Actions sono un pattern pienamente supportato e consigliato.

Una delle proprietà di sicurezza più importanti delle Server Actions è che i segreti non raggiungono mai il browser. Le variabili d'ambiente, come le password del database e le chiavi API utilizzate all'interno di una Server Action, non vengono mai incluse nel bundle client, perché il corpo della funzione non viene mai inviato al browser.

Gli elementi modulo HTML accettano direttamente una Server Action tramite l'attributo action: <form action={myServerAction}>. React intercetta l'invio del modulo e chiama la Server Action con i dati del modulo, consentendo di eseguire mutazioni lato server senza dover predisporre codice JavaScript lato client.

Quando viene attivata una Server Action, React serializza gli argomenti dell'action nel corpo di una richiesta POST. Il server li deserializza, esegue la funzione, serializza il valore restituito e lo invia al client. Attraverso questo confine possono passare solo valori serializzabili, come stringhe, numeri, array e oggetti semplici.

È possibile definire una Server Action a livello di modulo, in un file che contiene 'use server' all'inizio, oppure inline all'interno di un Server Component, inserendo 'use server' all'inizio della funzione asincrona. Entrambi gli approcci producono lo stesso risultato: una funzione chiamabile esclusivamente sul server.

I componenti client importano e chiamano le Server Actions proprio come normali funzioni asincrone. La sintassi della chiamata è identica a quella di una chiamata a una funzione asincrona locale, ma l'esecuzione avviene interamente sul server. Questa astrazione mantiene i componenti client semplici e privi del codice ripetitivo necessario per le chiamate fetch.

Le Server Actions sono funzioni asincrone lato server contrassegnate con 'use server'. Mantengono il contesto del server, incluse le connessioni al database e i segreti dell'ambiente. Next.js gestisce automaticamente il trasporto HTTP e React 19 le rende una funzionalità indipendente dal framework. I moduli possono utilizzarle direttamente tramite l'attributo action e i segreti al loro interno non raggiungono mai il browser.