Static Generation и ISR

Next.js поддерживает несколько стратегий рендеринга.

SSG (Static Site Generation)

Страница генерируется на этапе сборки. Один HTML для всех.

export default async function About() {
    const res = await fetch('https://api.example.com/about');
    const data = await res.json();
    return <p>{data.text}</p>;
}

Если нет динамических API — страница статическая по умолчанию.

generateStaticParams

Для динамических маршрутов:

// app/blog/[slug]/page.tsx
export async function generateStaticParams() {
    const posts = await getPosts();
    return posts.map((p) => ({ slug: p.slug }));
}

Next.js сгенерирует HTML для всех этих slug на этапе сборки.

dynamicParams

export const dynamicParams = true; // по умолчанию

• true — незнакомые slug генерируются на лету
• false — 404 для незнакомых

ISR (Incremental Static Regeneration)

Комбинация SSG и динамики. Страница статическая, но обновляется через время.

export const revalidate = 60;

export default async function Posts() {
    const posts = await getPosts();
    return <PostList posts={posts} />;
}

Первые 60 секунд — из кеша. Дальше — фоновая регенерация, пользователь получает старую версию, потом кеш обновляется.

On-demand Revalidation

Обновление по событию:

'use server';

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

export async function createPost(data: FormData) {
    await db.post.create({ data: { title: data.get('title') } });
    revalidatePath('/posts');
    revalidateTag('posts');
}

SSR (Server-Side Rendering)

Страница рендерится на каждый запрос. Нужно, если данные зависят от пользователя.

import { cookies } from 'next/headers';

export default async function Dashboard() {
    const cookieStore = await cookies();
    const token = cookieStore.get('token')?.value;
    const user = await getUser(token);

    return <h1>Привет, {user.name}</h1>;
}

Использование cookies(), headers(), searchParams делает страницу динамической.

force-dynamic

export const dynamic = 'force-dynamic';

Даже без динамических API страница рендерится на каждый запрос.

Сравнение

Что выбрать

Блог, документация, лендинг → SSG

Каталог, новости → ISR (revalidate: 3600)

Лента, комментарии → ISR с тегами или SSR

Профиль, корзина → SSR

Преимущества SSG/ISR

• Скорость — статический HTML отдаётся мгновенно
• CDN — можно кешировать на edge
• Нагрузка — сервер не работает на каждый запрос
• SEO — контент в HTML

Когда SSG не подходит

• Персональные данные
• Real-time
• Частые изменения
• Авторизация

Итоги

• SSG — при сборке
• ISR — статика + периодическая регенерация
• SSR — каждый запрос
• generateStaticParams для динамических
• revalidate и теги для обновления
• dynamic = 'force-dynamic' для принудительного SSR