Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Як налаштувати revalidation?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)Revalidation у Next.js - це налаштування, яке каже: **«можна віддавати дані/сторінку з кешу, але періодично оновлюй їх»**. У Next.js це можна налаштувати кількома способами - залежно від того, чи використовуєш ти **App Router**, чи **Pages Router**, і чи хочеш ти **періодичне**, чи **ручне (on-demand)** оновлення. **Ключове:** revalidation - це автооновлення кешу через інтервали або вручну.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення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`.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.