Frontend Academy · Урок

SSG, SSR и ISR

«SSG, SSR и ISR» — бесплатный урок Frontend Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.

Три стратегии формирования страниц

Next.js поддерживает три способа формирования страниц: SSG (генерация статического сайта), SSR (рендеринг на стороне сервера) и ISR (инкрементальная регенерация статического сайта). У каждого есть свои особенности и компромиссы.

SSG — генерация во время сборки

Страницы создаются как статический HTML во время сборки и раздаются из CDN. Это максимально быстрая доставка. Подходит для маркетинговых страниц, блогов и документации.

SSG в маршрутизаторе страниц

Экспортируйте getStaticProps со страницы. Функция выполняется во время сборки и передаёт props компоненту.

// pages/blog/[slug].tsx
export async function getStaticPaths() {
  const slugs = await fetchAllSlugs();
  return { paths: slugs.map(s => ({ params: { slug: s } })), fallback: false };
}

export async function getStaticProps({ params }) {
  const post = await fetchPost(params.slug);
  return { props: { post } };
}

SSG в маршрутизаторе приложения

По умолчанию асинхронные серверные компоненты получают данные во время сборки. Используйте generateStaticParams для динамических маршрутов.

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

export default async function Post({ params }) {
  const post = await fetchPost(params.slug);
  return <article>{post.body}</article>;
}

SSR — генерация для каждого запроса

Страницы формируются при каждом запросе. Используйте этот подход, когда содержимое зависит от пользователя или меняется слишком часто для кэширования.

SSR в маршрутизаторе страниц

Экспортируйте getServerSideProps.

// pages/dashboard.tsx
export async function getServerSideProps({ req }) {
  const userId = req.cookies.userId;
  const data = await fetchUserDashboard(userId);
  return { props: { data } };
}

SSR в маршрутизаторе приложения

Принудительно включите формирование для каждого запроса с помощью dynamic = 'force-dynamic' или чтения cookies/headers (это автоматически отключает статическую генерацию).

// app/dashboard/page.tsx
import { cookies } from 'next/headers';

export default async function Dashboard() {
  const userId = cookies().get('userId')?.value;
  const data = await fetchUserDashboard(userId);
  return <pre>{JSON.stringify(data, null, 2)}</pre>;
}

// Or explicit:
export const dynamic = 'force-dynamic';

ISR — лучшее из двух миров

ISR позволяет отдавать статическую страницу, но в фоновом режиме регенерировать её каждые N секунд. Этот подход сочетает скорость SSG с относительно актуальными данными.

ISR в маршрутизаторе страниц

Добавьте revalidate в getStaticProps.

export async function getStaticProps() {
  const posts = await fetchPosts();
  return {
    props: { posts },
    revalidate: 60  // regenerate at most every 60 seconds
  };
}

ISR в маршрутизаторе приложения

Используйте next: { revalidate: N } в параметрах запроса или задайте export const revalidate = N на странице.

// Option A: per fetch
const posts = await fetch('https://api/posts', { next: { revalidate: 60 } })
  .then(r => r.json());

// Option B: whole page
export const revalidate = 60;

export default async function Page() {
  const posts = await fetch('https://api/posts').then(r => r.json());
  return <Feed posts={posts} />;
}

Повторная валидация по запросу

Запускайте регенерацию вручную, например из вебхука CMS, не дожидаясь заданного интервала.

// pages/api/revalidate.ts (Pages) or app/api/revalidate/route.ts (App)
import { revalidatePath, revalidateTag } from 'next/cache';

export async function POST(req) {
  const { slug } = await req.json();
  revalidatePath(`/blog/${slug}`);
  return Response.json({ revalidated: true });
}

Выбор подходящей стратегии

Используйте SSG, если данные меняются редко (маркетинговые страницы, документация, блог). Используйте ISR, если данные обновляются время от времени (сайты на основе CMS, списки товаров). Используйте SSR для содержимого, зависящего от пользователя (панели управления, страницы аккаунтов).

Быстрая проверка

Что делает ISR (инкрементальная регенерация статического сайта), чего не делает обычный SSG?

Итоги: SSG, SSR и ISR

SSG: во время сборки, максимально быстро, фиксированное содержимое. SSR: для каждого запроса, динамично, медленнее. ISR: SSG + запланированная фоновая регенерация — актуальнее и быстро. Маршрутизатор страниц использует getStaticProps/getServerSideProps. Маршрутизатор приложения использует асинхронные серверные компоненты с повторной валидацией fetch или константой revalidate на уровне страницы. revalidatePath/revalidateTag используются для обновлений по запросу.

Часто задаваемые вопросы

Урок «SSG, SSR и ISR» бесплатный?

Да — полный текст урока «SSG, SSR и ISR» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.

Чему я научусь в уроке «SSG, SSR и ISR»?

Генерируйте страницы статически во время сборки, отображайте их на сервере для каждого запроса или периодически обновляйте страницы в кэше с помощью инкрементальной статической регенерации Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Frontend Academy?

Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «SSG, SSR и ISR»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Frontend Academy?

Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Frontend Academy