Odświeżanie strony

Część sekcji Podstawy Next.js ścieżki React w Coddy. Lekcja 32 z 47.

Od dwóch lekcji żyjesz w kłamstwie. Wyślij formularz, a element naprawdę zostanie zapisany, ale ekran się nie zmieni. Odśwież stronę, a tam będzie.

Powodem jest dokładnie to, co sprawia, że komponenty serwerowe są szybkie. Strona odczytała dane raz na serwerze, a przeglądarka przechowuje gotowy wynik. Twoja akcja zmieniła dane, które się za nim kryją. Nikt nie powiadomił strony.

Poprawka to jedna linijka, na końcu akcji:

'use server';

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

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

revalidatePath('/') odrzuca to, co Next.js zachował w pamięci podręcznej dla tej trasy, i renderuje ją ponownie (na serwerze, z aktualnymi danymi), a następnie podmienia wynik na stronie. Bez przeładowania, bez wskaźnika ładowania, bez zmiany stanu.

Argumentem jest trasa do ponownego wyrenderowania, zapisana tak, jak pojawia się w URL-u: '/' dla strony głównej, '/tasks' dla strony z zadaniami. Jeśli wskażesz niewłaściwą ścieżkę, nic widocznego się nie stanie: klasyczny błąd „moja akcja działa, ale lista jest nieaktualna”.

Czasami w ogóle nie chcesz zostawać na miejscu. W przypadku „zapisz, a potem przejdź gdzie indziej” akcja serwerowa może zakończyć działanie za pomocą redirect():

import { redirect } from 'next/navigation';

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

Ten sam import, którego użyjesz na stronie. Sięgnij po revalidatePath, gdy użytkownik pozostaje na stronie, a po redirect, gdy przechodzi dalej.

Wyzwanie

Łatwy

addTask zapisuje poprawnie, ale lista na ekranie nigdy się nie aktualizuje. Napraw to.

W app/actions.js zaimportuj revalidatePath z 'next/cache'.
Wywołaj ją dla ścieżki głównej, '/', po zapisaniu zadania.

Nie trzeba nic zmieniać w app/page.jsx: wystarczy jeden import i jedna linijka kodu.

Spróbuj swoich sił

import './globals.css';

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

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