Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Як працює revalidate?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)`revalidate` - це механізм у Next.js, який керує тим, **коли закешовані дані або сторінки вважаються застарілими і мають бути оновлені**. **Ключове:** найпростіше думати про `revalidate` як про таймер свіжості даних.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення`revalidate` - це механізм у Next.js, який керує тим, **коли закешовані дані або сторінки вважаються застарілими і мають бути оновлені**. Найпростіше думати про `revalidate` як про **таймер свіжості даних**. --- ## Базова ідея Коли ти вказуєш `revalidate`, ти кажеш Next.js: > «Ці дані можна вважати актуальними **N секунд**, > а потім їх потрібно оновити на сервері» Поки дані «свіжі»: - сервер **не робить нових запитів** - використовується кеш - сторінка віддається миттєво Коли дані «протухли»: - Next.js **перегенерує дані** - оновлює кеш - далі всі отримують нову версію --- ## Як працює revalidate крок за кроком 1. Перший користувач відкриває сторінку 2. Next.js завантажує дані і зберігає результат у кеш 3. Запускається таймер `revalidate` 4. Поки час не минув: - усім користувачам віддається кеш 5. Коли час минув: - наступний запит **тригерить оновлення** - сервер заново завантажує дані - кеш замінюється на свіжий Важливо: користувач **не чекає на оновлення** - він або отримує стару, або вже оновлену версію --- ## Де використовується revalidate ### 1. Статичні сторінки (Pages Router) `revalidate` вказує, **як часто перезбирати сторінку** після білда. - сторінка залишається статичною - перезбирається лише за потреби - без повного перезбирання сайту --- ### 2. `fetch` в App Router У сучасному Next.js `revalidate` застосовується **на рівні запиту даних**, а не всієї сторінки. Це означає: - кожне завантаження даних має свій кеш - різним даним можна задати різний час оновлення - сторінка збирається із «шматочків» із різною свіжістю Приклад логіки: - список товарів оновлюється раз на 60 секунд - опис категорії - раз на 10 хвилин - шапка сайту - майже ніколи --- ## Що відбувається технічно Якщо сильно спростити: - `revalidate = 0` -> кеш вимкнено, дані завжди свіжі - `revalidate = 60` -> дані оновлюються максимум раз на хвилину - `revalidate = 3600` -> дані оновлюються раз на годину Next.js сам вирішує: - коли використовувати кеш - коли зробити новий запит - коли оновити HTML --- ## Чим revalidate корисний `revalidate` дозволяє: - не робити запити на кожен захід - зберегти швидкість статичних сторінок - при цьому не тримати дані «замороженими» Це особливо важливо для: - блогів - каталогів - новинних сторінок - великих сайтів із часто змінюваним контентом --- ## Важливе обмеження `revalidate`: - не підходить для персональних даних - не гарантує оновлення «секунда в секунду» - чудово працює для публічного контенту Якщо дані мають бути **завжди актуальними**, потрібен серверний рендер на кожен запит. --- ## Коротко по суті `revalidate` - це: - час життя кешу - контроль частоти оновлення даних - основа ISR у Next.js Він дозволяє знайти баланс між: швидкістю, актуальністю і навантаженням на серверДля рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.