Обновление страницы

Часть раздела Основы Next.js путешествия по React на Coddy — урок 32 из 47.

Вы жили с иллюзией на протяжении двух уроков. Отправьте форму, и элемент действительно сохранится, но экран не обновится. Перезагрузите страницу — и вот он.

Причина именно в том, что делает Server Components быстрыми. Страница прочитала свои данные один раз, на сервере, и браузер хранит готовый результат. Ваше action изменило данные, стоящие за ним. Но странице об этом никто не сообщил.

Исправление состоит всего из одной строки в конце `action`:

'use server';

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

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

revalidatePath('/') сбрасывает всё, что Next.js закэшировал для этого маршрута, и рендерит его снова (на сервере, со свежими данными), после чего подставляет новый результат на страницу. Без перезагрузки, без спиннера, без состояния.

Аргументом является маршрут для повторного рендеринга, записанный в том виде, в каком он отображается в URL: '/' для главной страницы, '/tasks' для страницы задач. Укажите неверный путь, и ничего видимого не произойдет: классический баг «мой action работает, но список устарел».

Иногда вам вообще не нужно оставаться на текущей странице. Для сценария «сохранить, а затем перейти куда-то» Server Action может завершаться вызовом redirect():

import { redirect } from 'next/navigation';

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

Тот же import, который вы бы использовали на странице. Используйте revalidatePath, когда пользователь остается на странице, и redirect, когда он переходит на другую.

Задание

Легко

addTask сохраняет данные корректно, но список на экране не обновляется. Исправьте это.

В app/actions.js импортируйте revalidatePath из 'next/cache'.
Вызовите его для главная маршрута, '/', после сохранения задачи.

В app/page.jsx ничего менять не нужно: это исправление из одного импорта и одной строки.

Попробуйте сами

import './globals.css';

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

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