0Pricing
Next.js 15 Fullstack (App Router + Server Actions) · Leçon

Modifier les données et revalider

Apprenez comment les actions serveur peuvent modifier les données sur le serveur et revalider automatiquement les données mises en cache pour actualiser l’interface.

Modifier les données et revalider est une leçon Next.js 15 Fullstack (App Router + Server Actions) gratuite sur CoddyKit. Ceci est la leçon 2 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 Next.js 15 Fullstack (App Router + Server Actions), et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Next.js 15 Fullstack (App Router + Server Actions) comprend 4 leçons au total.

Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.

What is Data Mutation?

In web development, data mutation means changing data on the server. This includes creating new data, updating existing records, or deleting data.

  • Create: Adding a new user.
  • Update: Changing a user's email.
  • Delete: Removing an item from a list.

Most interactive web applications rely heavily on data mutation to provide dynamic experiences.

Server Actions for Mutations

Next.js 15's Server Actions are perfect for handling data mutations. They allow you to run server-side code directly from your React components, making it simple to update your backend.

Instead of creating API routes for every data change, you can define these actions right where they're needed, keeping your code organized and efficient.

The Cache Challenge

When you mutate data on the server, the client-side UI often doesn't automatically reflect these changes. This is because Next.js (and browsers) aggressively cache data to improve performance.

If the UI still shows old, cached data after a server update, users see outdated information. We need a way to tell Next.js: "Hey, this data has changed, please get the fresh version!"

Revalidating with `revalidatePath`

To ensure your UI shows the latest data, Next.js provides caching utilities. One common method is revalidatePath.

After a Server Action changes data, you can call revalidatePath('/') to tell Next.js to invalidate the cache for the specified path (e.g., the home page) and refetch its data on the next request.

Demo: Update & Revalidate Path

This example shows a simple form that adds a task using a Server Action. After the task is added, revalidatePath('/') ensures that any data displayed on the root page (like a list of tasks) is refreshed.

import { revalidatePath } from 'next/cache';

async function addTask(formData) {
  'use server';
  const task = formData.get('task');
  // Simulate saving to a database
  console.log('Adding task:', task);
  await new Promise(r => setTimeout(r, 500));

  // Revalidate the home page to show new tasks
  revalidatePath('/');
}

export default function Page() {
  return (
    <div>
      <h1>My Task List</h1>
      <form action={addTask}>
        <input type="text" name="task" placeholder="New task" required />
        <button type="submit">Add Task</button>
      </form>
      <p>Task list will refresh after adding!</p>
    </div>
  );
}

Granular Control with `revalidateTag`

Sometimes you need more granular control over caching than just revalidating an entire path. This is where revalidateTag comes in.

When fetching data, you can assign a custom tag using the fetch API. Then, after a mutation, you can use revalidateTag('my-data-tag') to invalidate only the data associated with that specific tag.

When to use `revalidateTag`

Use revalidateTag when:

  • Data is fetched from an external API using fetch.
  • The data is shared across multiple pages or components.
  • You want to update specific data without re-rendering entire pages.

It's ideal for scenarios like updating a single user's profile data that might appear on various pages.

Post-Mutation Redirection

After a successful data mutation, you often want to redirect the user to another page (e.g., a success page or the updated list page). Next.js provides a redirect helper for this.

You can use redirect('/dashboard') inside your Server Action to send the user to the dashboard after a form submission.

Full Flow: Mutate, Revalidate, Redirect

This example combines all concepts: a form submission triggers a Server Action, which mutates data, revalidates the relevant path, and then redirects the user to a confirmation page.

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

async function createPost(formData) {
  'use server';
  const title = formData.get('title');
  const content = formData.get('content');

  // Simulate saving new post to a DB
  console.log('New Post:', { title, content });
  await new Promise(r => setTimeout(r, 700));

  revalidatePath('/posts'); // Revalidate the posts list page
  redirect('/posts/success'); // Redirect to a success page
}

export default function NewPostPage() {
  return (
    <div>
      <h1>Create New Post</h1>
      <form action={createPost}>
        <input type="text" name="title" placeholder="Title" required />
        <textarea name="content" placeholder="Content" required />
        <button type="submit">Publish Post</button>
      </form>
    </div>
  );
}

Quick Check on Revalidation

A Server Action successfully creates a new product and you want to update the product listing page (/products) and also ensure any cached data specifically tagged 'featured-products' is refreshed. Which revalidation methods should you use?

Recap: Mutate & Revalidate

Great job! You've learned how Server Actions are key to mutating data on the server. You also mastered how to keep your UI fresh:

  • Use Server Actions for creating, updating, or deleting data.
  • Employ revalidatePath to refresh data for specific routes.
  • Utilize revalidateTag for fine-grained cache invalidation of tagged fetch requests.
  • Use redirect to guide users after a successful action.

This powerful combination ensures your Next.js applications are always showing accurate, up-to-date information.

Questions Fréquemment Posées

La leçon « Modifier les données et revalider » est-elle gratuite ?

Oui — le texte complet de « Modifier les données et revalider » 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 Next.js 15 Fullstack (App Router + Server Actions), passe à CoddyKit PRO. Le cours Next.js 15 Fullstack (App Router + Server Actions) comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Modifier les données et revalider » ?

Apprenez comment les actions serveur peuvent modifier les données sur le serveur et revalider automatiquement les données mises en cache pour actualiser l’interface. Tu pratiques Next.js 15 Fullstack (App Router + Server Actions) 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 Next.js 15 Fullstack (App Router + Server Actions) ?

Aucune expérience préalable n'est requise. Next.js 15 Fullstack (App Router + Server Actions) 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 2 sur 4.

Combien de temps prend la leçon « Modifier les données et revalider » ?

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 Next.js 15 Fullstack (App Router + Server Actions) ?

Oui. Chaque leçon Next.js 15 Fullstack (App Router + Server Actions) 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. Formulaires élémentaires avec des actions serveur
  2. Modifier les données et revalider
  3. Gestion des erreurs dans les actions
  4. Interface optimiste et états d’attente avec les actions serveur
← Retour à Next.js 15 Fullstack (App Router + Server Actions)