PassFront
  1. PassFront
  2. База знаний
  3. Server Side Rendering

Что такое ISR и как работает revalidate в Next.js?

Server Side Rendering

ISR (Incremental Static Regeneration) — страница отдаётся как статическая и обновляется в фоне через заданное время или по событию, без полной пересборки сайта.

Идея

При сборке или при первом запросе Next.js строит страницу и кладёт в кеш. Дальше она отдаётся мгновенно как статика. Когда срок устарел, следующий запрос получает старую версию, а в фоне запускается перегенерация (stale-while-revalidate).

Время

// app/products/page.tsx
export const revalidate = 60; // пересобирать не чаще раза в минуту

export default async function Products() {
  const items = await fetch('https://api.example.com/products').then((r) => r.json());
  return <List items={items} />;
}

По событию (on-demand)

import { revalidatePath, revalidateTag } from 'next/cache';

revalidatePath('/products');   // после изменения товара
revalidateTag('products');

Когда подходит

Каталоги, блоги, документация: контент меняется редко и должен отдаваться быстро. Для персональных данных и режима реального времени ISR не подходит.

Коротко для собеседования

ISR совмещает скорость статики и свежесть данных: страница обновляется по таймеру или вызову revalidate.

Другие вопросы раздела