Кэш страницы в Nuxt

Лента новостей или каталог обновляется часто, но не каждую секунду. Строить HTML заново на каждый визит дорого, а отдавать вчерашнюю версию вечно нельзя. Компромисс - краткий кэш: пока срок не истёк, пользователь получает сохранённый ответ, а свежая копия готовится параллельно.

Давайте познакомимся с правилом swr для адреса /news. Число в значении - время жизни кэша в секундах:

export default defineNuxtConfig({
	routeRules: {
		'/news': { swr: 60 },
	},
});

SWR (Stale-While-Revalidate, отдача сохранённой страницы, пока готовится новая). Пока прошло меньше шестидесяти секунд с прошлой генерации, Nuxt может отдать уже готовый HTML. Когда срок истекает, следующий запрос снова получает кэш, а обновление уходит в фон, чтобы следующие визиты увидели новую версию без долгого ожидания.

Страница новостей остаётся файлом в app/pages, правило не меняет её код:

<template>
	<h1>
		News
	</h1>
	<p>
		Latest headlines
	</p>
</template>

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

Сделайте страницу акций по адресу /deals с кэшем на тридцать секунд.