Implémentation de la session sans état pour Next.js en utilisant Server Actions
Utilisation de la nouvelle fonctionnalité Server Actions de Next.js pour implémenter une session sans état basée sur des cookies, et découvrir les avantages de Server Actions.
SijieDeveloper
Arrêtez de perdre des semaines sur l'authentification des utilisateurs
Lancez des applications sécurisées plus rapidement avec Logto. Intégrez l'authentification des utilisateurs en quelques minutes et concentrez-vous sur votre produit principal.
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.
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.
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é.
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.
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.
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"`` :
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 !
