> Какие есть виды генерации страниц в Next.js (JavaScript, Next.js)

Короткий ответ

В Next.js есть три основных вида генерации страниц: статическая генерация (SSG) на этапе сборки, серверный рендеринг (SSR) при каждом запросе и инкрементальная статическая регенерация (ISR) с обновлением по таймеру. Также поддерживается клиентский рендеринг (CSR) и частичный предварительный рендеринг (PPR) в экспериментальном режиме. Выбор зависит от требований к актуальности данных, скорости загрузки и частоты обновлений.

Подробное объяснение

Next.js предоставляет несколько стратегий генерации страниц, каждая из которых решает разные задачи производительности и актуальности данных:

• SSG (Static Site Generation) - страницы генерируются в HTML на этапе сборки (next build). Результат - статические файлы, которые раздаются через CDN. Идеально для контента, который редко меняется (блоги, документация). Данные извлекаются через getStaticProps.

• SSR (Server-Side Rendering) - страница рендерится на сервере при каждом запросе пользователя. Используется getServerSideProps. Подходит для персонализированного контента или данных, которые должны быть всегда свежими. Минус - более высокая нагрузка на сервер и задержка.

• ISR (Incremental Static Regeneration) - гибрид SSG и SSR. Страница генерируется статически, но с опцией revalidate в getStaticProps. После указанного времени при следующем запросе страница обновляется в фоне. Позволяет сочетать скорость статики с актуальностью данных.

• CSR (Client-Side Rendering) - данные загружаются на клиенте через useEffect или библиотеки вроде SWR/React Query. Используется для частей страницы, которые не влияют на SEO, или для динамических интерфейсов после загрузки.

• PPR (Partial Prerendering) - экспериментальная фича, комбинирующая статический и динамический контент на одной странице. Статическая оболочка генерируется заранее, а динамические части рендерятся на сервере или клиенте.

Выбор стратегии зависит от природы данных: статические (SSG), часто обновляемые (ISR), персонализированные (SSR) или интерактивные (CSR). В Next.js 13+ с App Router появились Server Components, которые упрощают гибридные подходы.

На практике

Для senior-разработчика важно не просто перечислить виды, а объяснить trade-off'ы. На практике часто комбинируют стратегии: например, статическая страница каталога с ISR для товаров и SSR для корзины пользователя. В App Router можно использовать fetch с опцией next: { revalidate } для ISR или cache: 'no-store' для SSR.

Ключевые моменты:

• SSG + CDN дают лучший TTFB, но требуют пересборки при изменении данных.
• ISR решает проблему пересборки, но возможна задержка в актуализации (stale-while-revalidate).
• SSR увеличивает нагрузку на сервер, но гарантирует свежесть данных.
• CSR подходит для дашбордов и админок, где SEO неважно.

В реальных проектах часто используют гибрид: статический лендинг (SSG), страницы товаров (ISR с revalidate: 60), пользовательские настройки (SSR), комментарии (CSR).

Пример кода

JSX
// SSG
export async function getStaticProps() {
  const data = await fetch('https://api.example.com/posts');
  return { props: { posts: await data.json() } };
}

// ISR
export async function getStaticProps() {
  const data = await fetch('https://api.example.com/products');
  return { 
    props: { products: await data.json() },
    revalidate: 60 // обновление раз в минуту
  };
}

// SSR
export async function getServerSideProps(context) {
  const user = await getUser(context.req.cookies.token);
  return { props: { user } };
}

// App Router (Next.js 13+)
// SSG по умолчанию
async function Page() {
  const data = await fetch('https://api.example.com/posts');
  const posts = await data.json();
  return <div>{posts.map(post => <Post key={post.id} {...post} />)}</div>;
}

// ISR в App Router
async function Page() {
  const data = await fetch('https://api.example.com/products', { 
    next: { revalidate: 60 } 
  });
  // ...
}

// SSR в App Router
async function Page() {
  const data = await fetch('https://api.example.com/user', { 
    cache: 'no-store' 
  });
  // ...
}

Как отвечать на собеседовании

Начни с краткого перечисления видов, затем углубись в детали. Покажи понимание trade-off'ов: когда что использовать и почему. Упомяни эволюцию от Pages Router к App Router - это покажет актуальность знаний. Приведи пример из реального проекта, где комбинировал стратегии. Избегай заучивания - говори своими словами, демонстрируя опыт.

Что проверяет интервьюер

• Понимание разницы между SSG, SSR, ISR и CSR.
• Умение выбирать стратегию под конкретную задачу.
• Знание особенностей App Router (Server Components, streaming, PPR).
• Осведомленность о производительности (TTFB, FCP, LCP) и SEO.
• Опыт работы с реальными кейсами и деплоем (Vercel, self-hosted).

Типичные ошибки

• Путаница между ISR и SSR: ISR - это статика с фоновым обновлением, а не серверный рендер на каждый запрос.
• Игнорирование stale-while-revalidate в ISR: пользователь может получить устаревшую версию.
• Использование SSR для страниц, которые можно сделать статическими (например, блог с редкими обновлениями).
• Непонимание, что в App Router getServerSideProps и getStaticProps заменены на fetch с опциями.
• Забывают про инвалидацию ISR через revalidateTag или revalidatePath в Next.js 13+.