Comment utiliser les actions du serveur Next.js

La version 13.4 de Next.js est livrée avec un routeur d'application stable et la possibilité d'effectuer une mutation de données avec des actions de serveur. Cette fonctionnalité change complètement la donne car elle vous permet d'effectuer des mutations de données entièrement à partir des composants du serveur. Cela apporte une foule d'avantages dans des domaines tels que la vitesse, la sécurité et les performances globales de l'application.

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

Que sont les actions du serveur?

Les actions de serveur vous permettent d'écrire des fonctions uniques côté serveur juste à côté de vos composants de serveur. C'est énorme car vous n'avez plus besoin d'écrire des routes d'API lors de la soumission de formulaires ou de tout autre type de mutation de données, y compris 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 de Next.js 13.4, et elle est construite au-dessus de React Actions. L'utilisation d'actions de serveur réduit le code JavaScript côté client et peut vous aider à créer des formulaires progressivement améliorés.

Exemple d'actions de serveur

Avec les actions du serveur, vous pouvez effectuer des mutations dans Next.js, sur le serveur. Jetez un œil à cette nouvelle fonctionnalité avec un exemple de page Next.js qui affiche un formulaire vous permettant de créer une publication.

Voici les importations :

importer Lien depuis"suivant/lien"
importer GroupeFormulaire depuis"@/composants/FormGroup"
importer { revalidateTag } depuis"suivant/cache"
importer { rediriger } depuis"suivant/navigation"

Passons maintenant au code pour créer le message. Cette fonction est une action du serveur; il 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) :

asynchronefonctioncreatePost(données) {
"utiliser le serveur"
constante titre = data.get("titre")
constante corps = data.get("corps")
attendre aller chercher(" http://127.0.0.1/posts", {
 entête: {"Type de contenu": "applications/json"},
 méthode: POST,
 corps: JSON.stringify({titre, corps})
 })
 revalidateTag("des postes")
 réorienter("/")
}

Cette fonction récupère le titre et le corps du message qu'elle envoie ensuite au /posts endpoint via une requête POST. Il force ensuite le cache à actualiser le contenu associé à la balise "posts" et le redirige vers la page d'accueil.

Voici un formulaire pour collecter le nouveau titre et le corps du message :

exporterdéfaut NouveauPostForm() {
retour (





"titre">Titre</label>
"texte" nom="titre" identifiant="titre" />
 </FormGroup>
 </div>




"titre">Corps</label>
"text" name=<span>"body"</span> id=<span>"body"</span>> <span><span><<span>textarea</span>/>< /span></span><br> <<span>/FormGroup></span><br> <<span>/div></span><p><code> <div>
<br> <button> Enregistrer <<span>/button></span><br> <<span>/div></span><br> <<span>/form></span><br> )<br>}<br>  <p>Vous pouvez voir que le formulaire ne contient aucune logique relative à la création de la publication, juste une action de formulaire: la fonction <strong>createPost()</strong>. Rappelez-vous que la fonction createPost a la directive "use server" qui déclare que tout ce qu'il contient la fonction doit s'exécuter sur le serveur.</p> <p>Tout le code s'exécute sur le serveur, et votre client ne sait rien à ce sujet. C'est parce que le formulaire est un composant serveur et qu'il n'y a rien qui soit rendu dynamiquement sur le client.</p> <p>Lorsque vous cliquez sur le bouton <strong>Enregistrer</strong>, Next.js appelle le <strong>createPost()</strong> fonction. Cela envoie le titre et le corps en tant que données de formulaire, qui sont publiées sur l'API locale pour enregistrer les informations.</p> <h2 id="revalidating-the-post"> Revalidation de la publication </h2> <p>Au bas de la fonction <strong>createPost()</strong> se trouve la ligne de code suivante :</p> <pre> <code>revalidateTags(<span>"posts"</span>)< /code> </code></pre> <p>Pour comprendre ce que fait cette fonction, imaginez que vous avez une page de messages. Dans le composant posts, vous appelez une fonction nommée <strong>getPosts()</strong> pour obtenir tous les messages de votre base de données et les afficher pour que l'utilisateur puisse les voir :</p> <pre> <code><span>exporter</span> <span>par défaut</span> <span>asynchrone</span> <span><span>fonction</span> <span>Messages</span>() span>{<br> <span>const</span> messages = <span>attendre</span> getPosts()</span></code><p><code> <span>return</span> (<br> <div>
<br> {posts.map(<span><span>post</span> = ></span> {<br> <cl postcard="{post.id}"></cl><br> })}<br> <<span>/div></span><br> )<br>}<br>  <p>La fonction <strong>getPosts()</strong> ressemblerait à ceci :</p> <pre> <code><span>async</span> <span><span>fonction</span> <span>getPosts</span>() </span>{<br> <span>const</span> res = <span>attendre</span> chercher(<span>" https://127.0.0.1/posts? sort=title"</span>, {<br> suivant: {<span>tags</span>: [<span>"messages"</span>], <span>revalider</span>: <span>3600</span> }<br> })</code><p><code> <span>retour</span> res.json()<br>}<br></code> </p></pre> <p>Cette fonction transmet l'option <strong>suivant</strong> à l'extraction, vous permettant de définir une période de revalidation. Par défaut, chaque demande d'extraction 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 <span>récupération des données dans Next.js</span>.</p> <p>Le code ci-dessus indique à Next.js de mettre en cache les données <strong>posts</strong> pendant une heure maximum (3 600 secondes). Après une heure, les données deviennent obsolètes et Next.js les actualise pour obtenir les données les plus récentes de la base de données.</p> <p>N'oubliez pas que la fonction <strong>createPost()</strong> appelle <strong>revalidateTag("posts")</strong> une fois qu'elle a terminé le reste de son travail. Cela oblige Next.js à récupérer à nouveau ces données, qui doivent inclure le nouveau message que l'application vient de créer.</p> <h2 id="proof-that-your-code-is-running-on-the-server"> Preuve que votre code s'exécute sur le serveur </h2> <p>Pour être certain que tout le code s'exécute sur le serveur, vous pouvez ajouter l'instruction de journal de la console suivante dans le Fonction <strong>createPost()</strong> :</p> <pre> <code><span>console</span>.log(<span>"Running on the server"</span>)</code> </pre> <p>Ensuite, essayez de créer un nouveau message en cliquant sur le bouton Soumettre. Si votre code s'exécute sur le serveur, ce message de journal apparaîtra sur votre terminal. Mais s'il s'exécute sur le client, le journal s'affichera dans la console du navigateur.</p> <p>Cela permet de mettre en toute sécurité des informations telles que les variables d'environnement, les connexions à la base de données et les mots de passe sur le serveur sans craindre qu'elles ne soient exposées au client. Vous pouvez ensuite <span>lire les chaînes de votre fichier .env</span> dans votre application Next.js.</p> <p>Vous pouvez souhaitez réserver l'utilisation des actions du serveur pour les versions de Next.js ultérieures à 13.4, en particulier dans production. Mais il est toujours très excitant de voir où va cette fonctionnalité, car elle pousse constamment ce que vous pouvez faire en déplaçant de plus en plus de choses sur le serveur. Cela devrait faciliter l'écriture de vos applications clientes et rendre le processus de développement beaucoup plus agréable.</p> <h2 id="learn-more-about-migrating-to-next-js"> En savoir plus sur la migration vers Next .js </h2> <p>De nombreux développeurs front-end 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, nombre de ces développeurs migrent leurs applications pour utiliser Next.js. Cette migration est très simple puisque React est assez similaire à Next.js en termes de syntaxe.</p> <p>Les performances supplémentaires et l'amélioration de la sécurité nécessitent encore plus la migration. La possibilité d'avoir des composants côté serveur, associée aux nouvelles actions de serveur que nous venons de couvrir, fait de Next.js une option plus sécurisée et plus performante que React. En tant que développeur React, vous devez apprendre à migrer votre application vers Next.js.</p> </div></code></p></pre></button>
</div></code></p></span>