Die Seite aktualisieren

Teil des Abschnitts Next.js Essentials der React-Journey von Coddy. Lektion 32 von 47.

Sie haben zwei Lektionen lang mit einer Lüge gelebt. Senden Sie das `form` ab, und das Element wird tatsächlich gespeichert, aber der Bildschirm bewegt sich nicht. Laden Sie die Seite neu, und da ist es.

Der Grund ist genau das, was Server Components schnell macht. Die Seite hat ihre Daten einmal auf dem Server gelesen, und was der Browser enthält, ist das fertige Ergebnis. Deine Aktion hat die dahinterliegenden Daten geändert. Niemand hat die Seite darüber informiert.

Die Behebung besteht aus einer Zeile am Ende der Aktion:

'use server';

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

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

revalidatePath('/') verwirft den Cache, den Next.js für diese Route angelegt hat, und rendert sie erneut (auf dem Server mit frischen Daten), bevor das neue Ergebnis in die Seite eingefügt wird. Kein Neuladen, kein Ladeindikator, kein Status.

Das Argument ist die Route zum erneuten Rendern, so geschrieben, wie sie in der URL erscheint: '/' für die Startseite, '/tasks' für eine Aufgabenseite. Verweist es auf den falschen Pfad, passiert sichtbar nichts: der klassische Fehler „Meine Aktion funktioniert, aber die Liste ist veraltet“.

Manchmal möchtest du überhaupt nicht an Ort und Stelle bleiben. Für „speichern und dann irgendwohin gehen“ kann eine Server Action mit redirect() enden:

import { redirect } from 'next/navigation';

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

Dieselbe Import-Anweisung, die du auch in einer Seite verwenden würdest. Verwende revalidatePath, wenn der Benutzer auf der Seite bleibt, und redirect, wenn er weitergeht.

Aufgabe

Einfach

addTask speichert korrekt, aber die Liste auf dem Bildschirm wird nie aktualisiert. Behebe das.

Importiere in app/actions.js revalidatePath aus 'next/cache'.
Rufe es nach dem Speichern der Aufgabe mit der Startseitenroute '/' auf.

In app/page.jsx muss nichts geändert werden: Dies ist eine Korrektur mit einem Import und einer Zeile.

Probier es selbst

import './globals.css';

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

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