Пошук уроків, статей та іншого контенту
Статичний рендеринг за замовчуванням, коли Next.js переходить у динамічний режим, і як працює ISR.
Якщо маршрут не використовує нічого, що залежить від конкретного запиту (без cookies(), headers(), searchParams чи некешованих динамічних запитів), Next.js рендерить його один раз під час збірки й далі роздає вже готовий HTML — це статичний рендеринг, еквівалент класичного SSG (Static Site Generation). Найшвидший варіант: жодної роботи сервера на кожен запит.
Щойно маршрут звертається до чогось специфічного для конкретного запиту — читає cookies(), headers(), searchParams, чи явно вимикає кешування запиту — Next.js автоматично перемикає весь маршрут у динамічний рендеринг: HTML генерується заново на кожен запит, як класичний SSR (Server-Side Rendering).
import { cookies } from "next/headers";
async function AccountPage() {
const cookieStore = await cookies(); // читання cookies робить маршрут динамічним
const sessionId = cookieStore.get("session")?.value;
const user = await getUserBySession(sessionId);
return <p>Привіт, {user.name}</p>;
}Incremental Static Regeneration поєднує швидкість статики з актуальністю даних: сторінка кешується як статична, але Next.js перегенеровує її у фоні після спливання заданого часу — наступний користувач після цього моменту вже отримує оновлену версію, без потреби в повторній повній збірці всього застосунку:
// app/blog/[slug]/page.tsx
export const revalidate = 3600; // перегенерувати статичну сторінку не частіше ніж раз на годину
async function BlogPost({ params }: { params: Promise<{ slug: string }> }) {
const { slug } = await params;
const post = await getPost(slug);
return <article>{post.title}</article>;
}Статичний рендеринг (SSG) — рендериться один раз під час збірки, найшвидший, підходить для контенту, що майже не змінюється (маркетингові сторінки, документація).
ISR — статика з періодичним автооновленням у фоні, підходить для контенту, що змінюється нечасто, але має лишатись відносно свіжим (пости блогу, каталог товарів).
Динамічний рендеринг (SSR) — генерується заново на кожен запит, підходить для персоналізованого чи справді часто змінюваного вмісту (панель користувача з даними в реальному часі).
Вважати, що весь застосунок на Next.js рендериться на сервері на кожен запит («SSR за замовчуванням») — насправді за замовчуванням Next.js намагається рендерити статично, де це можливо, і переходить у динамічний режим лише за потреби.
Не усвідомлювати, що виклик cookies() чи headers() в одному компоненті робить динамічним увесь маршрут, а не лише цей конкретний компонент.
Ставити занадто короткий revalidate «про всяк випадок» — кожне спливання інтервалу означає повторний запит до джерела даних при першому візиті після нього, що частково нівелює перевагу статики.
Next.js обирає стратегію рендерингу автоматично, орієнтуючись на код маршруту: без залежності від конкретного запиту — статичний рендеринг (SSG); з такою залежністю (cookies, headers, searchParams) — динамічний рендеринг (SSR) на кожен запит; ISR — проміжний варіант, що поєднує швидкість статики з періодичним фоновим оновленням через export const revalidate.