Comment utiliser les actions serveur de Next.js

La version 13.4 de Next.js a été livrée avec un routeur d’applications stable et la possibilité d’effectuer des mutations de données avec des actions de serveur. Cette fonctionnalité est un changement de jeu absolu car elle vous permet d’effectuer des mutations de données entièrement à partir de composants de serveur. Cela apporte une foule d’avantages dans des domaines tels que la vitesse, la sécurité et la performance globale de l’application.

Découvrez ce que sont les actions serveur et comment utiliser cette nouvelle fonctionnalité dans votre application Next.js.

Que sont les actions serveur ?

Les actions serveur vous permettent d’écrire des fonctions uniques côté serveur directement à côté de vos composants serveur. C’est énorme parce que vous n’avez plus besoin d’écrire des routes API lors de la soumission de formulaires ou de tout autre type de mutation de données, y compris les mutations de données GraphQL.

Vous pouvez avoir des fonctions qui s’exécutent sur votre serveur, et vous pouvez ensuite les appeler à partir de composants client ou serveur. Il s’agit d’une fonctionnalité alpha dans Next.js 13.4, et elle est construite au-dessus de React Actions. L’utilisation d’actions serveur permet de réduire le JavaScript côté client et peut vous aider à créer des formulaires progressivement améliorés.

Exemple d’actions serveur

Avec les actions serveur, vous pouvez effectuer des mutations à l’intérieur de Next.js, sur le serveur. Jetez un coup d’œil à cette nouvelle fonctionnalité avec un exemple de page Next.js qui rend un formulaire vous permettant de créer un message.

Voici les importations :

Passons maintenant au code de création de l’article. Cette fonction est une action serveur ; elle s’exécute sur le serveur et envoie le titre et le corps du message à l’API (qui crée le message dans la base de données) :

Cette fonction obtient le titre et le corps du message, qu’elle envoie ensuite à l’API /posts via une requête POST. Elle force ensuite le cache à rafraîchir le contenu associé à la balise « posts » et redirige vers la page d’accueil.

Voici un formulaire pour collecter le titre et le corps du nouvel article :

Vous pouvez voir que le formulaire ne contient aucune logique relative à la création de l’article, juste une action de formulaire : la balise createPost() du formulaire. Rappelons que la fonction createPost possède la directive « use server » qui déclare que tout ce qui se trouve dans cette fonction doit être exécuté sur le serveur.

Tout le code s’exécute sur le serveur et votre client n’en sait rien. C’est parce que le formulaire est un composant serveur et qu’il n’y a rien qui soit rendu dynamiquement sur le client.

Lorsque vous cliquez sur le bouton Enregistrer Next.js appelle la fonction createPost() . Celle-ci envoie le titre et le corps en tant que données de formulaire, qui sont envoyées à l’API locale pour enregistrer les informations.

Revalidation du message

Au bas de la page createPost() se trouve la ligne de code suivante :

Pour comprendre ce que fait cette fonction, imaginez que vous ayez une page posts. Dans le composant posts, vous appelleriez une fonction nommée getPosts() pour récupérer tous les messages de votre base de données et les afficher pour que l’utilisateur puisse les voir :

Le getPosts() ressemblerait à ceci :

Cette fonction transmet le suivante à fetch, ce qui vous permet de définir une période de revalidation. Par défaut, chaque requête fetch que vous faites à l’intérieur du composant serveur est mise en cache pour toujours. Garder une trace du cache et le rafraîchir si nécessaire est une partie importante de la récupération de données dans Next.js.

Le code ci-dessus indique à Next.js de mettre en cache le fichier postes pendant une heure (3 600 secondes). Après une heure, les données deviennent périmées et Next.js les rafraîchit pour obtenir les données les plus récentes de la base de données.

Rappelez-vous que la balise createPost() appelle revalidateTag(« posts ») une fois qu’elle a terminé le reste de son travail. Cela oblige Next.js à récupérer ces données qui devraient inclure le nouveau message que l’application vient de créer.

Preuve que votre code s’exécute sur le serveur

Pour être certain que tout le code s’exécute sur le serveur, vous pouvez ajouter la déclaration de journal de console suivante à l’intérieur du fichier createPost() à l’intérieur de la fonction createPost() :

Ensuite, essayez de créer un nouveau message en cliquant sur le bouton d’envoi. Si votre code est exécuté sur le serveur, ce message s’affichera sur votre terminal. Mais s’il est exécuté sur le client, le journal s’affichera dans la console du navigateur.

Il est donc possible de placer des informations sensibles telles que des variables d’environnement, des connexions à des bases de données et des mots de passe sur le serveur sans craindre qu’elles ne soient exposées au client. Vous pouvez ensuite lire les chaînes de votre fichier .env dans votre application Next.js.

Vous voudrez peut-être réserver l’utilisation des actions serveur pour les versions de Next.js postérieures à la 13.4, en particulier en production. Mais c’est toujours très excitant de voir où va cette fonctionnalité puisqu’elle pousse constamment ce que vous pouvez faire en déplaçant de plus en plus de choses vers le serveur. Cela devrait rendre vos applications clientes plus faciles à écrire, et le processus de développement beaucoup plus agréable.

En savoir plus sur la migration vers Next.js

De nombreux développeurs frontaux utilisent React pour le développement de l’interface utilisateur. Mais grâce à des fonctionnalités telles que le rendu côté serveur et la génération de sites statiques, un grand nombre de ces développeurs migrent leurs applications pour utiliser Next.js. Cette migration est très simple car React est assez similaire à Next.js en termes de syntaxe.

Les performances supplémentaires et l’amélioration de la sécurité rendent la migration encore plus nécessaire. La possibilité d’avoir des composants côté serveur, couplée aux nouvelles actions serveur que nous venons de couvrir, fait de Next.js une option plus sûre et plus performante par rapport à React simple. En tant que développeur React, vous devriez apprendre à migrer votre application vers Next.js.