Aggiornare la pagina

Fa parte della sezione Nozioni essenziali di Next.js del percorso React di Coddy. Lezione 32 di 47.

Stai vivendo con una bugia da due lezioni. Invia il modulo e l'elemento viene davvero salvato, ma la schermata non cambia. Ricarica la pagina e lo vedrai lì.

Il motivo è esattamente ciò che rende veloci i Server Components. La pagina ha letto i suoi dati una sola volta, sul server, e ciò che il browser contiene è il risultato finale. La tua azione ha modificato i dati sottostanti. Nessuno ha avvisato la pagina.

La correzione consiste in una sola riga, alla fine dell'azione:

'use server';

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

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

revalidatePath('/') elimina ciò che Next.js ha memorizzato nella cache per quel percorso e lo renderizza di nuovo (sul server, con dati aggiornati), quindi sostituisce il risultato precedente nella pagina con quello nuovo. Nessun ricaricamento, nessun indicatore di caricamento, nessuno stato.

L’argomento è la route da renderizzare di nuovo, scritta come appare nell’URL: '/' per la home page, '/tasks' per una pagina delle attività. Se la punti al percorso sbagliato, non succede nulla di visibile: il classico bug «la mia azione funziona, ma l’elenco non si aggiorna».

A volte non vuoi proprio restare dove sei. Per «salvarlo e poi andare da qualche parte», una Server Action può terminare con redirect():

import { redirect } from 'next/navigation';

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

Lo stesso import che useresti in una pagina. Usa revalidatePath quando l’utente resta sulla pagina e redirect quando passa a un’altra.

Sfida

Facile

addTask salva correttamente, ma l’elenco sullo schermo non si aggiorna mai. Correggilo.

In app/actions.js, importa revalidatePath da 'next/cache'.
Chiamala con la route principale, '/', dopo aver salvato l’attività.

Non è necessario modificare nulla in app/page.jsx: la correzione consiste in un import e una riga.

Provalo tu

import './globals.css';

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

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