Это три основные стратегии для того, когда генерируется HTML страницы. Выбор правильной для каждой страницы балансирует свежесть, производительность и затраты сервера.
SSG — Static Site Generation (во время сборки)
// HTML generated ONCE during `next build`, then served from CDN
export default async function Page() {
const posts = await fetch("...", { cache: "force-cache" }).then(r => r.json());
return <List posts={posts} />;
}
Страница предварительно отрисовывается в статический HTML во время сборки и кэшируется на CDN. Самая быстрая возможная доставка, но содержимое заморожено до следующей сборки. Лучше всего для содержимого, которое редко меняется: маркетинговые страницы, документация, записи в блоге.
SSR — Server-Side Rendering (при каждом запросе)
// HTML generated FRESH on every request
export default async function Page() {
const data = await fetch("...", { cache: "no-store" }).then(r => r.json());
return <Dashboard data={data} />;
}
Сервер отрисовывает страницу при каждом запросе, поэтому данные всегда актуальны — ценой более медленных ответов и нагрузки на сервер при каждом посещении. Лучше всего для персонализированных или всегда актуальных данных: панели мониторинга, страницы учётных записей, результаты поиска.
ISR — Incremental Static Regeneration (гибрид)
// Static, but automatically rebuilt in the background every N seconds
export const revalidate = 60; // regenerate at most once per 60s
export default async function Page() {
const products = await fetch("...", { next: { revalidate: 60 } }).then(r => r.json());
return <Products items={products} />;
}
ISR предоставляет статический HTML (быстро, кэшировано на CDN), но повторно валидирует его в фоне по расписанию — поэтому вы получаете производительность статики с периодически обновляемыми данными, без перестройки всего сайта. Лучше всего для содержимого, которое меняется иногда: списки товаров, новости, рейтинги.
Сравнение
Speed Freshness Server cost Use for
SSG fastest build-time only none docs, marketing
SSR slower always fresh every request dashboards, personalized
ISR fast every N seconds occasional catalogs, news
Почему это важно
В App Router вы выбираете эти варианты за каждую выборку через опции кэша (force-cache = SSG, no-store = SSR, revalidate = ISR) вместо специальных функций.
Понимание компромисса — статика самая быстрая, но устаревает, SSR свежая, но дорогая, ISR балансирует оба — позволяет оптимизировать каждую страницу для правильного сочетания производительности и свежести данных.