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 so schnell macht. Die Seite hat ihre Daten einmal auf dem Server gelesen, und was der Browser enthält, ist das fertige Ergebnis. Ihre `action` hat die dahinterliegenden Daten geändert. Niemand hat es der Seite mitgeteilt.

Die Lösung ist eine Zeile am Ende der `action`:

'use server';

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

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

revalidatePath('/') verwirft das, was Next.js für diese Route im Cache gespeichert hat, und rendert sie erneut (auf dem Server, mit frischen Daten) und fügt dann das neue Ergebnis in die Seite ein. Kein Neuladen, kein Spinner, kein Zustand.

Das Argument ist die Route, die neu gerendert werden soll, geschrieben wie sie in der URL erscheint: '/' für die Startseite, '/tasks' für eine Tasks-Seite. Zeigt es auf den falschen Pfad, passiert nichts Sichtbares: der klassische "meine Action funktioniert, aber die Liste ist veraltet"-Bug.

Manchmal möchten Sie überhaupt nicht an Ort und Stelle bleiben. Für "speichern, dann woanders hingehen" 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}`);
}

Derselbe Import, den Sie auch in einer Seite verwenden würden. Greifen Sie zu revalidatePath, wenn der Benutzer auf der Seite bleibt, und zu 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 mit der Home-Route, '/', auf, nachdem der task gespeichert wurde.

In app/page.jsx muss nichts geändert werden: Dies ist eine Behebung mit einem einzigen import und einer einzigen 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>
    );
}