Comment utiliser les Server Actions avec NextJS

De nos jours, les performances et l'efficacité sont devenus des enjeux très importants. Les utilisateurs sont de plus en plus exigeants avec l'expérience qu'ils peuvent avoir quand ils passent leur temps sur un site internet.

Pour aider encore plus à optimiser les performances du chargement des pages, nous avons vu l'arrivée d'une fonctionnalité magique : les Server Actions.

Les Server Actions sont arrivées depuis NextJS 13 mais ont été rendues vraiment utilisables depuis NextJS 14.

Elles permettent de gérer les données directement sur le serveur tout en facilitant le chargement de la page côté client.

Si vous débutez, il est indispensable de suivre une formation complète sur React avant d'utiliser NextJS : un bon développeur NextJS est avant tout un bon développeur React (qui lui-même est avant tout un bon développeur JavaScript) ! 😋

Comprendre les Server Actions

Les Server Actions sont, comme nous l'avons-vu, une des fonctionnalités phares de NextJS. Elles permettent d'effectuer des instructions sur notre serveur directement depuis les composants (même les Client components).

Un Client component qu'on appelle en bon français un composant client est un code qui s'execute sur le navigateur de notre utilisateur. Contrairement au Server Component qui lui est executé sur le serveur puis envoyé tout prêt sur notre utilisateur.

Contrairement aux méthodes comme getServerSideProps ou getStaticProps (désormais dépréciées depuis NextJS 13), les Server Actions s'intègrent directement dans les composants sans avoir besoin de pages dédiées ou de hooks complexes.

Pourquoi utiliser les Server Actions ?

L’utilisation des Server Actions offre plusieurs avantages :

1. Amélioration des performances : En exécutant du code directement sur le serveur, on réduit la charge sur le client, ce qui améliore considérablement les temps de chargement.
2. Simplification du code : Les Server Actions suppriment la nécessité de créer des fichiers API séparés ou d'utiliser des fonctions comme getServerSideProps. Vous pouvez maintenant gérer tout dans les composants eux-mêmes.
3. Réduction du JavaScript côté client : Comme une grande partie du travail se fait côté serveur, la taille du bundle JavaScript envoyé au client est réduite, ce qui accélère l’application.

Mettre en place des Sever Actions dans NextJS

Initialiser un projet NextJS

Si vous débutez avec NextJS, voici comment initialiser un projet :

npx create-next-app@latest

Lors de l'initialisation, vous pouvez choisir d'utiliser le routeur app ou pages : choisissez le routeur app. C'est beaucoup mieux, car c'est le tout dernier routeur proposé par NextJS qui permet de mieux structurer votre application et d'exploiter pleinement les Server Components et les Server Actions.

Configurer les Server Actions

Les Server Actions s’utilisent directement dans les composants. Il n'y a qu'à marquer une fonction avec l’attribut async pour l’utiliser comme une Server Action.

Exemple : dans un Server Component

Les Server Components peuvent utiliser à la fois :

• les fonctions inline
• le module avec "use server"

Pour imaginer plus facilement, prenons un exemple pour une fonction inline :

export default function Page() {
    // ...

    // Server Action
    async function create() {
        "use server"
        const res = await fetch('https://believemy.com');
        // ...
    }

    return (
        <form action={create}></form>
    );
}

Dans cet exemple, nous chargons les données de l'article dynamiquement. Nous utilisons ici une fonction inline. Cette approche simplifie énormément le flux de données tout en permettant de réduire la quantité de code exécuté côté client.

Pour une utilisation grâce à un module,nous devrions créer un nouveau fichier et ajouter la directive use server.

Toutes les fonctions dans ce fichier seront considérées comme des Server Actions.

Par exemple nous aurions un fichier actions.jsx :

'use server'

export async function create() {
    // ...
}

export async function replace() {
    // ...
}

Afin d'utiliser notre Server Action nous aurons dans notre Server Component ce code :

import { create } from "./actions";

export default function ServerComponent() {
    return <form action={create}></form>
}

Comme vous pouvez constater, nous utilisons un attribut un peu spécial : action.

Il permet de préciser à NextJS que nous souhaitons utiliser une Server Action. Il enverra ainsi l'ensemble des informations présentes à l'intérieur de ce formulaire sur notre serveur quand l'utilisateur l'enverra.

Exemple : dans un Client Component

Les Client Components peuvent utiliser uniquement le module pour utiliser un Server Action.

Si nous reprenons notre exemple pour les Server Component nous avons donc un fichier actions.jsx :

'use server'

export async function create() {
    // ...
}

export async function replace() {
    // ...
}

Pendant que dans notre Client component nous aurions :

'use client'

import { create } from "./actions";

export default function ClientComponent() {
    return <form action={create}></form>
}

API Routes vs Server Actions

Avec l'arrivée des Server Actions, beaucoup de développeurs se sont demandés s'il fallait encore utiliser les API Routes.

Les API Routes, introduites dans les premières versions de NextJS, permettent de créer des adresses spécialement créées pour former une API. Ces adresses sont par la suite utilisées dans tout le projet pour dialoguer avec le serveur. 👀

Avec les Server Actions, ces adresses spéciales ne sont plus nécessaires dans la plupart des cas, car vous pouvez gérer les requêtes directement dans les composants.

Alors, voici un petit récap.

Quand utiliser les API Routes :

• Lorsque vous avez besoin de créer des points d’API accessibles à d’autres services externes.
• Pour centraliser la logique serveur dans un fichier.

Quand utiliser les Server Actions :

• Lorsque vous souhaitez que la récupération des données soit directement liée au rendu des composants.
• Pour optimiser les performances et simplifier le code en évitant des requêtes API client supplémentaires.

Autre avantage des Server Actions, ils permettent de faire du caching. Ceci veut dire que les requêtes qui sont faites pour récupérer les derniers articles de votre site peuvent être mises en cache afin de ne pas avoir besoin d'être executées à chaque fois. Cela accélère considérablement les temps de chargement, surtout pour les données qui ne changent pas fréquemment.

FAQ sur les Server Actions

Nos apprenants sur nos formations nous posent de nombreuses questions : voici un petit résumé des questions les plus intéressantes, elles pourront peut-être vous aider ! 😉

Quelles sont les meilleures pratiques pour utiliser les Server Actions avec NextJS ?

Assurez-vous de bien gérer les erreurs côté serveur et d’utiliser les Server Actions uniquement lorsque c'est vraiment nécessaire ! Car cela alourdi un peu votre code et ça, c'est pas terrible.

Les Server Actions affectent-elles le SEO ?

Non, elles améliorent même le SEO en accélérant le rendu des pages.

Est-il possible d'utiliser des API externes avec les Server Actions ?

Oui, les Server Actions sont bien entendu utilisables pour interagir avec des API externes. C'est même encore mieux pour être sûr et certain qu'une vos clés API ne fuite pas dans la nature !

Les API Routes sont-elles encore utiles dans NextJS 14 et plus ?

Oui, pour certains cas où vous avez besoin d’exposer une API à des services externes, mais pour la plupart les Server Actions suffisent.

Comment se former à NextJS ?

Avec notre formation ! 😇 Vous pouvez la retrouver ici.