Сброс кэша пути в NextJS

Когда содержимое маршрута меняется из формы или кнопки, сохраненный HTML может устареть. В серверном действии после записи в базу или файла вызывают функцию revalidatePath из пакета next/cache - она сбрасывает кэш указанного пути, и следующий запрос соберет страницу заново.

Давайте хранить названия в модуле, добавлять новое имя через действие и сразу после этого сбрасывать кэш списка:

export let members = [
	'Alice',
	'Bob',
];

'use server';

import { revalidatePath } from 'next/cache';
import { members } from './data';

export async function addMember() {
	members.push('Carol');
	revalidatePath('/team');
}

import { members } from './data';
import { addMember } from './actions';

export default function TeamPage() {
	return (
		<div>
			<ul>
				{members.map(function (name, index) {
					return <li key={index}>{name}</li>;
				})}
			</ul>
			<form action={addMember}>
				<button type="submit">Add member</button>
			</form>
		</div>
	);
}

Сделайте страницу перечня задач и кнопку, которая дописывает новую задачу на сервере, затем сбрасывает кэш этого маршрута.

Проверьте, что после отправки формы список на экране показывает добавленную строку без ручной перезагрузки вкладки.