Время жизни данных в NextJS

Статический HTML не обязан жить вечно. Константа revalidate в файле страницы задает интервал в секундах: после него NextJS может пересобрать маршрут и подставить свежий результат запросов. Пока срок не истек, посетители получают сохраненную версию быстрее, чем полная сборка на каждый клик.

Обычный fetch по-прежнему не кэшируется сам по себе - важно, что страница в целом допускает статическую стратегию и не тянет динамические сигналы вроде searchParams. Данные из API попадут в HTML при очередной пересборке маршрута.

Давайте выставим интервал шестьдесят секунд и выведем список постов с тестового API:

export const revalidate = 60;

export default async function PostsPage() {
	let response = await fetch('https://jsonplaceholder.typicode.com/posts');
	let posts = await response.json();
	
	return (
		<ul>
			{posts.slice(0, 5).map(function (post) {
				return <li key={post.id}>{post.title}</li>;
			})}
		</ul>
	);
}

Ограничьте актуальность страницы списка статей интервалом в две минуты и выведите пять заголовков из API.

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