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 précisément ce qui rend les composants serveur rapides. La page a lu ses données une seule fois, sur le serveur, et ce que le navigateur contient est le résultat final. Votre action a modifié les données sous-jacentes. Personne n’en a informé 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('/') abandonne ce que Next.js a mis en cache pour cette route et la restitue (sur le serveur, avec des données à jour), puis remplace le résultat actuel par le nouveau dans la page. Pas de rechargement, pas d’indicateur de chargement, pas d’é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 rester sur place. Pour « l’enregistrer, puis aller quelque part », une action serveur peut se terminer par redirect() :

import { redirect } from 'next/navigation';

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

Le 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 à autre chose.

Défi

Facile

addTask enregistre correctement la tâche, mais la liste à l’écran ne se met jamais à jour. Corrigez cela.

Dans app/actions.js, importez revalidatePath depuis 'next/cache'.
Appelez-le avec la route d’accueil, '/', après l’enregistrement de la tâche.

Rien ne doit être modifié dans app/page.jsx : il s’agit d’une correction consistant en un import et 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>
    );
}