0Pricing
React Academy · Leçon

Actions serveur pour les mutations de données

Définissez des fonctions « use server » pour gérer les mutations de formulaires et invalider le cache avec revalidatePath.

Actions serveur pour les mutations de données est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage React Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Academy comprend 4 leçons au total.

Que sont les actions serveur ?

Les actions serveur sont des fonctions asynchrones marquées avec 'use server' qui s’exécutent exclusivement sur le serveur. Elles permettent de gérer les soumissions de formulaires et les mutations de données sans écrire de gestionnaires de routes d’API.

Définir une action serveur

Ajoutez 'use server' au début de la fonction (ou du fichier) pour créer une action serveur. Celle-ci ne peut être définie que dans des composants serveur ou dans des fichiers actions.ts dédiés.

// app/actions.ts
'use server';

import { revalidatePath } from 'next/cache';
import { redirect } from 'next/navigation';

export async function createPost(formData: FormData) {
  const title = formData.get('title') as string;
  await db.post.create({ data: { title } });
  revalidatePath('/blog');
  redirect('/blog');
}

Utiliser les actions dans les formulaires

Passez la fonction d’action à la propriété action d’un formulaire. Pas de onSubmit ni de gestionnaire d’événements : Next.js sérialise le formulaire et appelle l’action côté serveur.

import { createPost } from './actions';

export default function NewPostForm() {
  return (
    <form action={createPost}>
      <input name="title" placeholder="Post title" required />
      <button type="submit">Create</button>
    </form>
  );
}

Fonction useActionState

useActionState (React 19) enveloppe une action pour suivre son état d’attente et recevoir sa valeur de retour dans le composant.

'use client';
import { useActionState } from 'react';
import { createPost } from './actions';

const initialState = { error: null };

export function PostForm() {
  const [state, action, isPending] = useActionState(createPost, initialState);
  return (
    <form action={action}>
      {state.error && <p className="error">{state.error}</p>}
      <input name="title" />
      <button disabled={isPending}>{isPending ? 'Creating...' : 'Create'}</button>
    </form>
  );
}

Renvoyer les erreurs de validation

Renvoyez un objet depuis l’action au lieu de lever une exception afin de transmettre les erreurs de validation au formulaire via useActionState.

export async function createPost(prevState: any, formData: FormData) {
  'use server';
  const title = formData.get('title') as string;
  if (!title || title.length < 3) {
    return { error: 'Title must be at least 3 characters' };
  }
  await db.post.create({ data: { title } });
  revalidatePath('/blog');
  redirect('/blog');
}

Actions serveur dans les gestionnaires d’événements

Appelez les actions serveur depuis les gestionnaires d’événements d’un composant client, et pas uniquement depuis les actions de formulaire, en les important et en les appelant directement.

'use client';
import { deletePost } from './actions';

export function DeleteButton({ id }: { id: string }) {
  return (
    <button onClick={() => deletePost(id)}>
      Delete
    </button>
  );
}

Actions serveur intégrées

Définissez des actions serveur directement dans un composant serveur à l’aide d’une fonction contenant 'use server' : cette approche est utile pour regrouper la logique de mutation au même endroit.

export default function PostPage({ post }) {
  async function updatePost(formData: FormData) {
    'use server';
    await db.post.update({ where: { id: post.id }, data: { title: formData.get('title') as string } });
    revalidatePath(`/blog/${post.id}`);
  }

  return (
    <form action={updatePost}>
      <input name="title" defaultValue={post.title} />
      <button type="submit">Save</button>
    </form>
  );
}

useOptimistic avec les actions serveur

Associez useOptimistic aux actions serveur pour mettre l’interface à jour instantanément pendant que l’action s’exécute en arrière-plan.

'use client';
import { useOptimistic } from 'react';
import { addItem } from './actions';

export function TodoList({ items }) {
  const [optimisticItems, addOptimistic] = useOptimistic(items, (state, newItem) => [...state, newItem]);
  return (
    <form action={async (formData) => {
      addOptimistic({ id: 'temp', text: formData.get('text') });
      await addItem(formData);
    }}>
      <ul>{optimisticItems.map(i => <li key={i.id}>{i.text}</li>)}</ul>
      <input name="text" /><button>Add</button>
    </form>
  );
}

Considérations de sécurité

Les actions serveur sont des points de terminaison POST en interne. Validez et assainissez toujours les entrées côté serveur, vérifiez l’authentification et utilisez une protection CSRF (Next.js la gère automatiquement pour les requêtes de même origine).

Revalider après les mutations

Appelez revalidatePath() ou revalidateTag() après une mutation pour vider les caches concernés afin que le prochain chargement de page reflète la modification.

Vérification rapide

Comment transmettre une action serveur à un formulaire dans le routeur App de Next.js ?

Récapitulatif

Les actions serveur sont des fonctions asynchrones 'use server' qui gèrent les mutations côté serveur. Reliez-les aux formulaires via la propriété action, suivez leur état avec useActionState, renvoyez les erreurs au lieu de lever des exceptions pour la validation et revalidez les caches après les mutations.

Questions Fréquemment Posées

La leçon « Actions serveur pour les mutations de données » est-elle gratuite ?

Oui — le texte complet de « Actions serveur pour les mutations de données » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours React Academy, passe à CoddyKit PRO. Le cours React Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Actions serveur pour les mutations de données » ?

Définissez des fonctions « use server » pour gérer les mutations de formulaires et invalider le cache avec revalidatePath. Tu pratiques React Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer React Academy ?

Aucune expérience préalable n'est requise. React Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « Actions serveur pour les mutations de données » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon React Academy ?

Oui. Chaque leçon React Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. fetch() et options de cache dans Next.js
  2. unstable_cache et cache() de React
  3. Régénération statique incrémentielle (ISR)
  4. Actions serveur pour les mutations de données
← Retour à React Academy