Server Actions et mutations

🎬 Que sont les Server Actions ?

Les Server Actions sont des fonctions qui s'exécutent côté serveur, mais que l'on peut appeler directement depuis un composant ou un formulaire dans le navigateur. C'est l'une des fonctionnalités les plus disruptives apportées par Next.js 14.

Avant les Server Actions, pour modifier une donnée (créer un commentaire, ajouter au panier, supprimer un post), il fallait créer une route API REST, écrire le code de la requête fetch côté client, gérer les états de chargement, l'erreur, le rafraîchissement de la page. Beaucoup de code répétitif.

Avec les Server Actions, tout ce code disparaît. On écrit une fonction serveur, on la passe à un formulaire, et tout fonctionne — y compris si JavaScript est désactivé.

🚀 Avantages des Server Actions

• Pas d'API REST à créer — la fonction serveur est appelable directement
• Type-safety totale — TypeScript valide les paramètres entre client et serveur
• Progressive enhancement — fonctionne même sans JavaScript activé
• Moins de code — un formulaire et une fonction, c'est tout
• Sécurité renforcée — la logique sensible reste sur le serveur

⚙️ La directive use server

Pour transformer une fonction normale en Server Action, on ajoute une directive textuelle en première ligne du fichier ou de la fonction. Cette directive indique au compilateur Next.js que la fonction doit être exécutée uniquement côté serveur.

Deux placements possibles :

• En haut du fichier — toutes les fonctions exportées du fichier sont des Server Actions
• En haut d'une fonction — seule cette fonction est une Server Action

⚠️ Attention sécurité : ne jamais utiliser de variables d'environnement secrètes dans des Client Components, et toujours valider les inputs côté serveur dans les Server Actions.

📋 Hooks pour gérer l'état des formulaires

React 19 introduit deux hooks dédiés aux formulaires connectés à des Server Actions :

• useFormState — récupère le résultat de la dernière exécution de la Server Action (succès, erreurs de validation, message)
• useFormStatus — connaître l'état du formulaire en cours de soumission (pending true/false), utile pour désactiver le bouton submit

Combinés, ces deux hooks permettent de gérer formulaires, validations et feedbacks utilisateur sans aucune ligne de useState ou useEffect.

♻️ Invalider le cache après une mutation

Après une mutation (création, modification, suppression), il faut invalider le cache pour que les données fraîches s'affichent. Next.js fournit deux fonctions :

• revalidatePath — invalide une route précise, par exemple "/blog/mon-article"
• revalidateTag — invalide toutes les requêtes fetch qui portent un tag donné

Exemple de scénario : un utilisateur poste un commentaire. La Server Action insère le commentaire en base, puis appelle revalidatePath sur la page de l'article. La prochaine visite affiche le nouveau commentaire sans rebuild complet.

⚡ Optimistic updates

Pour une UX premium, on peut afficher immédiatement le résultat attendu avant même que le serveur réponde. C'est le pattern optimistic update, géré par le hook useOptimistic de React 19.

Cas d'usage typiques : like Twitter, ajout au panier, validation d'une todo. Le visuel se met à jour instantanément, et si la Server Action échoue, on rollback automatiquement.

🆚 API Routes vs Server Actions

🌐 Edge Runtime vs Node Runtime

Next.js permet de choisir l'environnement d'exécution de chaque route ou Server Action.

🛡️ Middleware Next.js

Le fichier middleware à la racine du projet s'exécute avant chaque requête. Il tourne sur l'Edge Runtime et permet d'intercepter, modifier ou rediriger les requêtes.

• Authentification — vérifier qu'un user est connecté avant d'accéder à /dashboard
• Redirections — old-url vers new-url, locale détectée par langue navigateur
• Géolocalisation — afficher contenu différent selon le pays (Cameroun vs Canada)
• A/B testing — assigner les visiteurs à un variant
• Bot detection — bloquer les scrapers

💡 Cas d'usage Server Actions

• Formulaire de commentaire — submit, validation, insertion DB, revalidatePath
• Like / dislike — toggle avec optimistic update
• Ajout au panier — mutation côté serveur, mise à jour cookie panier
• Suppression d'item — confirmation, deleteFromDatabase, revalidate
• Upload de fichier — FormData reçu côté serveur, sauvegarde S3
• Newsletter signup — insert email, envoi mail de confirmation

✅ À retenir : les Server Actions remplacent 90 % des cas où on créait une API REST en interne. Garde les API Routes pour les cas publics ou mobiles.