Skip to main content

Як налаштувати revalidation?

Next.jsMiddle~1 хв читання
Запропонувати правку

Revalidation у Next.js - це налаштування, яке каже: «можна віддавати дані/сторінку з кешу, але періодично оновлюй їх». У Next.js це можна налаштувати кількома способами - залежно від того, чи використовуєш ти App Router, чи Pages Router, і чи хочеш ти періодичне, чи ручне (on-demand) оновлення.

1) App Router: revalidation для конкретного fetch

Найчастіший варіант - вказати revalidate прямо в запиті:

ts
const res = await fetch("https://api.example.com/posts", { next: { revalidate: 60 }, // оновлювати раз на 60 секунд }); const posts = await res.json();

Що це означає:

  • дані беруться з кешу
  • Next.js оновить кеш не частіше, ніж раз на 60 секунд
  • користувачі зазвичай отримують швидку відповідь з кешу

Якщо потрібно завжди свіже - вимикаєш кеш:

ts
await fetch(url, { cache: "no-store" })

2) App Router: revalidation для всього сегмента (сторінки/лейауту)

Можна задати "політику" кешування для цілого сегмента роутингу:

ts
export const revalidate = 300; // 5 хвилин

Зазвичай це кладуть у page.tsx або layout.tsx.

Сенс:

  • Next.js вважатиме цей сегмент "кешованим"
  • і пересобиратиме/оновлюватиме його не частіше вказаного інтервалу

Важливо: якщо всередині сегмента є fetch(..., { cache: "no-store" }), він "зламає" ідею кешування для цих даних - вони завжди будуть свіжими.

3) Pages Router: ISR через getStaticProps

Якщо проект на Pages Router, revalidation налаштовується так:

ts
export async function getStaticProps() { const res = await fetch("https://api.example.com/posts"); const posts = await res.json(); return { props: { posts }, revalidate: 60, // раз на 60 секунд може бути оновлення }; }

Це класичний ISR:

  • сторінка статична
  • але періодично оновлюється

4) On-demand revalidation (оновлення за подією)

Іноді не хочеться чекати "60 секунд", а потрібно оновити одразу, наприклад:

  • вийшла нова стаття
  • змінився товар
  • адмін натиснув "опублікувати"

App Router: revalidatePath і revalidateTag

Можна "скидати" кеш:

  • за шляхом (сторінка/роут)
  • за тегом (група запитів)

а) Оновити конкретний шлях

ts
import { revalidatePath } from "next/cache"; revalidatePath("/blog");

б) Оновити все, що позначено тегом

При запиті:

ts
await fetch(url, { next: { tags: ["posts"] } });

Потім скидання:

ts
import { revalidateTag } from "next/cache"; revalidateTag("posts");

Зазвичай це роблять у серверній дії (server action) або в route handler після зміни даних.

5) Як обрати спосіб

  • Потрібно "раз на N секунд" → next: { revalidate: N } (або export const revalidate = N)
  • Потрібно завжди свіже → cache: "no-store"
  • Потрібно оновлювати за подією → revalidatePath() / revalidateTag()

Коротка витяжка

  • Revalidation - це автооновлення кешу через інтервали або вручну.
  • App Router:
    • для запиту: fetch(url, { next: { revalidate: 60 } })
    • для сегмента: export const revalidate = 60
    • вручну: revalidatePath, revalidateTag
  • Pages Router: ISR через getStaticProps + revalidate: 60.

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Запропонувати правку