Кэширование в Next.js Router: как увидеть, почему данные не обновились

Кэширование в Next.js Router можно увидеть в браузерных DevTools: откройте вкладку Network, найдите запрос к странице и посмотрите заголовки Cache-Control и ETag. Если в ответе стоит max‑age=300, то данные будут храниться в кэше 5 минут, и обновление не произойдёт сразу.

Как проверить кэширование запросов в Next.js Router?

Прямой ответ: используйте Chrome DevTools → Network, включите Disable cache и проверьте заголовки ответа. После этого перезагрузите страницу без кеша (Ctrl+F5) и сравните результаты.

• 1. Откройте страницу в Chrome и нажмите F12.
• 2. Перейдите на вкладку Network и включите чекбокс Disable cache.
• 3. Обновите страницу (Ctrl+F5) и найдите основной запрос GET /.
• 4. Откройте детали запроса и обратите внимание на заголовки Cache-Control, ETag, Age.
• 5. Если max‑age > 0, значит сервер просит браузер хранить ответ в кэше.

Почему данные могут не обновляться после изменения API?

Ответ: данные могут оставаться старыми из‑за ISR (Incremental Static Regeneration) или из‑за кеша CDN, который хранит статическую страницу до истечения revalidate‑интервала.

В Next.js 13 (2026‑03‑15) по умолчанию для страниц, использующих fetch с next‑опцией revalidate, установлен интервал 60 секунд. Если вы задали revalidate: 300, то обновление произойдёт только раз в 5 минут, что часто путает разработчиков.

• • ISR сохраняет HTML‑страницу на сервере и отдаёт её из кэша до истечения тайм‑аута.
• • CDN (например, Vercel Edge) может хранить копию ещё 30 % дольше, если включён stale‑while‑revalidate.
• • Локальный браузерный кэш может держать ответ до 1 GB объёма, если не принудительно сбросить.

Что делать, если кэш не сбрасывается автоматически?

Прямой совет: принудительно вызвать router.refresh() или использовать revalidatePath в серверных функциях.

• 1. Добавьте кнопку «Обновить данные» в клиентский компонент и привяжите её к router.refresh().
• 2. В API‑роуте после изменения данных вызовите revalidatePath('/your-page') – это заставит Next.js сбросить кэш.
• 3. Если используете fetch, укажите next: { revalidate: 0 } для отключения кеширования в конкретном запросе.
• 4. На уровне CDN очистите кеш через Vercel Dashboard → Settings → Purge Cache.
• 5. При отладке добавьте заголовок Cache-Control: no-store в ответ API (только в dev‑режиме).

Как настроить ISR (Incremental Static Regeneration) в Next.js 2026 версии?

Ответ: укажите параметр revalidate в функции fetch или в getStaticProps. Пример ниже показывает, как задать 10‑секундный интервал.

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data', {
    next: { revalidate: 10 } // 10 секунд
  });
  const data = await res.json();
  return { props: { data } };
}

Если вы хотите динамически менять интервал, используйте переменную окружения NEXT_PUBLIC_REVALIDATE и задайте её в .env.local как 30 (секунд). В 2026‑м году Next.js поддерживает on‑demand ISR, позволяя вызывать POST /api/revalidate из любого места.

• • Шаг 1: Создайте файл pages/api/revalidate.js.
• • Шаг 2: Внутри обработчика вызовите res.revalidate('/path').
• • Шаг 3: Защитите эндпоинт токеном, например process.env.REVALIDATE_TOKEN.
• Шаг 4: После изменения данных в базе отправьте запрос curl -X POST -d "{\"secret\":\"TOKEN\"}" https://your-site.com/api/revalidate.

Какие инструменты помогают отладить кэширование в реальном времени?

Ответ: используйте комбинацию Chrome DevTools, Next.js DevTools Extension и онлайн‑сервис toolbox-online.ru «Cache Inspector».

• 1. Chrome DevTools – проверка заголовков, вкладка Application → Cache Storage.
• 2. Next.js DevTools Extension (доступна в Chrome Web Store, версия 2.3.0 от 2026‑01‑12) – показывает статус ISR, время последней регенерации и активные пути.
• 3. toolbox-online.ru → Cache Inspector – онлайн‑утилита, где вы вводите URL и получаете полную разбивку кэш‑политик без регистрации.
• 4. curl с флагом -I для быстрой проверки заголовков: curl -I https://your-site.com/page.
• 5. Postman – позволяет сохранять набор запросов и сравнивать ответы до и после изменения revalidate.

Воспользуйтесь бесплатным инструментом Cache Inspector на toolbox-online.ru — работает онлайн, без регистрации.