Next.js permet désormais aux développeurs d'appeler des fonctions exclusivement côté serveur directement depuis un composant, éliminant ainsi le besoin de créer des routes API distinctes pour des tâches courantes comme la soumission de formulaires. En utilisant la nouvelle fonctionnalité Server Actions, un simple formulaire HTML peut déclencher du code backend sans appel fetch intermédiaire, réduisant le code répétitif et renforçant le contrat entre le front-end et le back-end.

Pourquoi l'ancienne méthode semble lourde

Dans une application React ou Next.js typique, un simple formulaire « créer un projet » déclenche une chaîne d'étapes : un fichier de route API, une requête fetch depuis le navigateur, la gestion des états de chargement et d'erreur, les en-têtes CORS, et enfin une mise à jour côté client pour refléter les nouvelles données. Chaque étape ajoute des fichiers, des lignes de code et des points de défaillance. Les équipes passent du temps à relier ces éléments entre eux, même lorsque le seul objectif est d'écrire un enregistrement dans une base de données.

Les Server Actions comblent l'écart

Les Server Actions sont des fonctions asynchrones dont l'exécution est garantie uniquement sur le serveur. L'ajout de la directive "use server" en haut d'un fichier indique au compilateur de garder le code hors du bundle du navigateur, afin qu'il puisse accéder en toute sécurité aux bases de données, aux secrets ou à toute ressource exclusivement côté serveur. Comme la fonction réside sur le serveur, le composant peut l'invoquer directement via l'attribut action d'un élément <form> natif.

Définir une action

export async function createProject(formData: FormData) {
  const title = formData.get('title') as string;

  if (!title) throw new Error('Title is required');

  await db.project.create({
    data: { title }
  });

  revalidatePath('/dashboard');
}

La fonction reçoit un objet FormData, valide la charge utile, écrit dans la base de données, puis demande à Next.js de rafraîchir la page /dashboard afin que l'interface utilisateur affiche le nouveau projet sans rechargement complet.

L'intégrer dans l'interface utilisateur

export default function NewProjectForm() {
  return (
    <form action={createProject}>
      <input type="text" name="title" required />
      <SubmitButton />
    </form>
  );
}

Lorsque l'utilisateur clique sur le bouton de soumission, le navigateur envoie les données du formulaire à la fonction createProject côté serveur. Comme cela utilise le comportement standard des formulaires HTML, la soumission fonctionne même si le JavaScript n'est pas encore chargé, ce qui améliore la performance perçue sur les connexions lentes.

Ce que les équipes y gagnent

  • Moins de fichiers – Pas de fichiers pages/api ou app/api distincts pour chaque point de terminaison.
  • Moins de liaisons – Pas d'appels fetch manuels, pas de gestion explicite du CORS.
  • Sécurité de type intégrée – La signature de la fonction est partagée entre le serveur et le client, ce qui permet à TypeScript de détecter les incohérences rapidement.
  • Avantage de performance – La requête est transmise directement à la fonction serveur, évitant un saut réseau supplémentaire qu'un fetch côté client introduirait.

Limites et précautions

Les Server Actions sont encore une fonctionnalité récente. Elles ne peuvent être que des fonctions asynchrones marquées "use server", et elles ne peuvent pas renvoyer d'objets JavaScript arbitraires au client ; elles doivent se terminer par une redirection, une revalidation ou une réponse simple. Le débogage peut sembler différent car la pile d'appels (call stack) passe du navigateur au runtime du serveur, ce qui peut surprendre les développeurs habitués aux logs classiques des routes API. De plus, les flux de travail complexes impliquant plusieurs microservices ou nécessitant des codes d'état HTTP précis peuvent encore nécessiter un point de terminaison API traditionnel.

Points de vigilance

Next.js élargira probablement l'API des Server Actions dans les prochaines versions, en ajoutant la prise en charge de types de réponse plus variés et une meilleure intégration des outils. Les premiers adoptants devraient suivre le journal des modifications (changelog) du framework et les retours de la communauté pour évaluer la stabilité avant de confier des fonctionnalités critiques à ce mode. Surveiller la taille du bundle et les métriques de rendu serveur peut également révéler si la réduction du code client se traduit par des gains de latence mesurables pour vos modèles de trafic spécifiques.

L'essentiel

En permettant à un composant d'appeler directement une fonction exclusivement côté serveur, les Server Actions de Next.js suppriment l'intermédiaire qui encombrait depuis longtemps les projets React. Le résultat est un code plus propre, des allers-retours plus rapides et une expérience de développement plus fluide — à condition que les contraintes actuelles de la fonctionnalité correspondent aux besoins du projet.