Actualiser la page

Fait partie de la section L'essentiel de Next.js du Journey React de Coddy — leçon 32 sur 47.

Vous vivez avec un mensonge depuis deux leçons. Soumettez le formulaire, et l'élément est réellement enregistré, mais l'écran ne bouge pas. Rechargez la page et le voilà.

La raison est exactement ce qui rend les Server Components rapides. La page a lu ses données une fois, sur le serveur, et ce que le navigateur conserve est le résultat final. Votre action a modifié les données sous-jacentes. Personne ne l'a indiqué à la page.

La correction tient en une ligne, à la fin de l'action :

'use server';

import { revalidatePath } from 'next/cache';
import { saveTask } from '../lib/db';

export async function addTask(formData) {
    saveTask(formData.get('title'));
    revalidatePath('/');
}

revalidatePath('/') supprime ce que Next.js a mis en cache pour cette route et le rend à nouveau (sur le serveur, avec des données fraîches), puis remplace l'ancien résultat dans la page. Aucun rechargement, aucun spinner, aucun état.

L'argument est la route à re-rendre, écrite de la façon dont elle apparaît dans l'URL : '/' pour la page d'accueil, '/tasks' pour une page de tâches. Si vous la pointez vers le mauvais chemin, rien de visible ne se produit : le bug classique « mon action fonctionne mais la liste est périmée ».

Parfois, vous ne voulez pas du tout rester sur place. Pour « enregistrer, puis aller quelque part », une Server Action peut se terminer par redirect() :

import { redirect } from 'next/navigation';

export async function createPost(formData) {
    const id = savePost(formData.get('title'));
    redirect(`/posts/${id}`);
}

Même import que celui que vous utiliseriez dans une page. Utilisez revalidatePath lorsque l'utilisateur reste sur la page, et redirect lorsqu'il passe à la suite.

Défi

Facile

addTask enregistre correctement, mais la liste à l'écran ne se met jamais à jour. Corrigez le problème.

Dans app/actions.js, importez revalidatePath depuis 'next/cache'.
Appelez-le avec la route d'accueil, '/', après que la tâche est enregistrée.

Rien dans app/page.jsx n'a besoin de changer : il s'agit d'un correctif d'un import et d'une ligne.

Essayez vous-même

import './globals.css';

export const metadata = {
    title: 'My App',
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
        </html>
    );
}