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.

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

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).

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.

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.

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 ! 😉

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.

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

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 !

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

Avec notre formation ! 😇 Vous pouvez la retrouver ici.