Implementazione di sessioni senza stato per Next.js utilizzando Server Actions

Introduzione#

A seguito del tanto acclamato rilascio dell'App Router, Next.js ha introdotto un'altra caratteristica, Server Actions. Questa nuova innovazione facilita le manipolazioni dei dati lato server, riduce la dipendenza dal JavaScript lato client e migliora progressivamente i moduli, il tutto utilizzando JavaScript e React per creare applicazioni web robuste senza la necessità di API REST tradizionali.

In questo articolo, esploreremo i numerosi vantaggi offerti da questa innovazione e la vedremo in azione mentre implementiamo una sessione senza stato basata su cookie per Next.js. Questo pezzo funge da guida passo dopo passo che ti accompagnerà in ogni fase della creazione di un progetto demo utilizzando l'App Router.

La nostra dimostrazione pratica può essere facilmente distribuita su Vercel utilizzando Edge Runtime. E puoi scaricare il codice sorgente completo da GitHub.

Abbandonare le API REST#

Tradizionalmente, se vogliamo creare un'app web Next.js che interroga il database nel backend, potremmo creare alcune API REST per validare lo stato di autenticazione e interrogare il database, quindi l'app React frontend chiamerà queste API. Ma se non c'è bisogno di aprire l'API al pubblico e questa app React è l'unico client, sembra ridondante usare le API REST poiché verranno chiamate solo da noi stessi.

Con Server Actions, il componente React può ora eseguire codice lato server. Invece di dover creare manualmente un endpoint API, Server Actions crea automaticamente un endpoint per Next.js da usare in background. Quando si chiama una Server Action, Next.js invia una richiesta POST alla pagina su cui ti trovi con i metadati per specificare quale azione eseguire.

La necessità di una sessione senza stato#

Come framework preferito per creare applicazioni senza stato, Next.js spesso significa serverless, in cui non possiamo usare la memoria per memorizzare i dati di sessione. Le sessioni tradizionali richiedono l'uso di un servizio di archiviazione esterno, come Redis o un database.

Tuttavia, quando i dati della sessione rimangono abbastanza piccoli, abbiamo un'alternativa: progettare una sessione senza stato utilizzando metodi di crittografia sicuri e cookie memorizzati lato client. Questo metodo elimina la necessità di archiviazione esterna e mantiene i dati della sessione decentralizzati, offrendo vantaggi significativi in termini di carico sul server e prestazioni complessive dell'applicazione.

Quindi, il nostro obiettivo è una sessione senza stato leggera ed efficiente che sfrutti la capacità di archiviazione lato client garantendo la sicurezza attraverso una crittografia ben eseguita.

Implementazione di base della sessione#

Per iniziare, dobbiamo avviare un nuovo progetto:

Per maggiori dettagli sull'installazione, fai riferimento alla guida ufficiale.

Creazione di una libreria di sessioni#

Per semplificare la comprensione delle Server Actions, creeremo prima una versione semplificata della sessione. In questa versione, utilizzeremo JSON per memorizzare i dati della sessione nei cookie.

Crea un file chiamato session/index.ts e includi il seguente codice:

La prima linea "use server" indica che le funzioni di questo file sono Server Actions.

Poiché non possiamo accedere direttamente a request e response, utilizziamo next/headers per leggere e scrivere i cookie. Questo è disponibile solo in Server Actions.

In arrivo: altre due Server Actions#

Con la libreria di sessioni pronta, è tempo di implementare una funzionalità di sign in e sign out per mostrare l'usabilità della sessione.

Incorpora il seguente codice in user/index.ts:

Qui, stiamo utilizzando un processo di sign in 'fittizio' che richiede solo un nome utente.

Costruire la pagina#

In App Router, la pagina è solitamente un componente asincrono, e le Server Actions non possono essere invocate direttamente da tale componente. Dobbiamo creare componenti utilizzando "use client":

components/sign-in.tsx

components/sign-out.tsx

Infine, costruiamo la nostra app/page.tsx

Implementazione della crittografia#

Il lavoro delle Server Actions è finito. Ora, l'ultima parte riguarda l'implementazione della crittografia, che può essere realizzata tramite crypto.

Successivamente, modifica la libreria di sessioni per implementare quanto segue:

Conclusione#

Congratulazioni! Hai implementato con successo una sessione senza stato per Next.js. Ecco un'anteprima online qui su Vercel, e puoi scaricare il codice sorgente completo qui. Speriamo che questa guida ti aiuti a comprendere le nuovissime Server Actions.

Successivamente, esploreremo come utilizzare le Server Actions per integrare Logto per Next.js. Rimani sintonizzato!