Implémentation de la session sans état pour Next.js en utilisant Server Actions

Introduction#

Suite à la sortie tant attendue du App Router, Next.js a introduit une autre fonctionnalité, Server Actions. Cette nouvelle innovation facilite les manipulations de données côté serveur, réduit la dépendance au JavaScript côté client, et améliore progressivement les formulaires, tout en utilisant JavaScript et React pour créer des applications web robustes sans avoir besoin des traditionnelles API REST.

Dans cet article, nous explorons les nombreux avantages offerts par cette innovation et la voyons en action en implémentant une session sans état basée sur des cookies pour Next.js. Cet article sert de guide pas à pas qui vous guidera à travers chaque phase de la création d'un projet de démonstration en utilisant l'App Router.

Notre démonstration pratique peut être facilement déployée sur Vercel en utilisant Edge Runtime. Vous pouvez télécharger le code source complet depuis GitHub.

Éloignement des API REST#

Traditionnellement, si nous voulons créer une application web Next.js qui interroge une base de données en backend, nous pourrions créer des API REST pour valider l'état d'authentification et interroger la base de données, puis l'application React côté client appellera ces API. Mais s'il n'est pas nécessaire d'ouvrir des API au public et que cette application React est le seul client, il semble redondant d'utiliser des API REST car elles ne seront appelées que par nous-mêmes.

Avec Server Actions, le composant React peut maintenant exécuter du code côté serveur. Plutôt que de créer manuellement un point de terminaison API, Server Actions crée automatiquement un point de terminaison pour que Next.js l'utilise en coulisses. Lors de l'appel à une Server Action, Next.js envoie une requête POST à la page sur laquelle vous vous trouvez avec des métadonnées indiquant quelle action exécuter.

Le besoin de session sans état#

En tant que framework privilégié pour la création d'applications sans état, Next.js est souvent synonyme de serverless, dans lequel nous ne pouvons pas utiliser la mémoire pour stocker les données de session. Les sessions traditionnelles nécessitent l'utilisation d'un service de stockage externe, tel que Redis ou une base de données.

Cependant, lorsque les données de session restent suffisamment petites, nous avons une alternative : concevoir une session sans état en utilisant des méthodes de cryptage sécurisées et des cookies stockés côté client. Cette méthode contourne le besoin de stockage externe et garde les données de session décentralisées, offrant ainsi des avantages non négligeables en matière de charge serveur et de performance globale de l'application.

Ainsi, notre objectif est une session sans état légère et efficace qui tire parti des capacités de stockage côté client tout en garantissant la sécurité grâce à un cryptage bien exécuté.

Implémentation basique de la session#

Tout d'abord, nous devons initier un nouveau projet :

Pour plus de détails sur l'installation, consultez le guide officiel.

Création d'une bibliothèque de sessions#

Pour faciliter la compréhension des Server Actions, nous allons d'abord créer une version simplifiée de la session. Dans cette version, nous allons utiliser JSON pour stocker les données de session dans les cookies.

Créez un fichier appelé session/index.ts et incluez le code suivant :

La première ligne "use server" marque les fonctions de ce fichier comme des Server Actions.

Comme nous ne pouvons pas accéder directement à request et response, nous utilisons next/headers pour lire et écrire les cookies. Ceci est uniquement disponible dans les Server Actions.

Arrivée : deux autres Server Actions#

Avec la bibliothèque de sessions en place, il est temps d'implémenter une fonctionnalité de connexion et de déconnexion pour démontrer l'utilisabilité de la session.

Incorporez le code suivant dans user/index.ts :

Ici, nous utilisons un processus de connexion « fictif » qui nécessite simplement un nom d'utilisateur.

Construction de la page#

Dans App Router, la page est généralement un composant asynchrone, et les Server Actions ne peuvent pas être invoquées directement à partir d'un tel composant. Nous devons créer des composants en utilisant `"use client"`` :

components/sign-in.tsx

components/sign-out.tsx

Enfin, construisons notre app/page.tsx

Implémentation de l'encryption#

Le travail des Server Actions est terminé. Maintenant, la dernière partie concerne l'implémentation du cryptage qui peut être réalisée via crypto.

Ensuite, modifiez la bibliothèque de sessions pour implémenter ce qui suit :

Conclusion#

Félicitations ! Vous avez implémenté avec succès une session sans état pour Next.js. Voici un aperçu en ligne sur Vercel, et vous pouvez télécharger le code source complet ici. Nous espérons que ce guide vous aidera à comprendre la toute nouvelle fonctionnalité Server Actions.

Ensuite, nous explorerons comment utiliser Server Actions pour intégrer Logto à Next.js. Restez à l'écoute !