Что такое Static Generation в Next.js?

Что такое Static Generation в Next.js?

Static Generation (Статическая генерация) — это один из двух основных методов предварительной отрисовки (pre-rendering) страниц в Next.js, при котором HTML-страницы генерируются во время сборки приложения (build time). Это означает, что контент создаётся один раз при выполнении команды next build и остаётся неизменным для всех пользователей до следующей сборки. Этот подход кардинально отличается от Server-Side Rendering (SSR), где HTML генерируется динамически при каждом запросе.

Ключевые принципы Static Generation

• Предсказуемость данных: Страницы строятся на основе данных, доступных в момент сборки. Это могут быть данные из файловой системы (например, Markdown-файлы), API, базы данных или headless CMS.
• Кэширование на уровне CDN: Поскольку итоговые HTML-файлы, а также связанные с ними JS и CSS, являются статическими активами, их можно агрессивно кэшировать в сети доставки контента (CDN). Это обеспечивает беспрецедентную скорость загрузки для пользователей по всему миру.
• Отсутствие нагрузки на сервер: После развёртывания статически сгенерированные страницы не требуют работы сервера Node.js для их отдачи. Их можно обслуживать с помощью любого статического хостинга (Vercel, Netlify, GitHub Pages, S3).

Как реализуется Static Generation?

Next.js предоставляет две ключевые асинхронные функции для получения данных при Static Generation:

1. getStaticProps: Используется для сбора данных, необходимых для отрисовки самой страницы. Эта функция выполняется на сервере во время сборки.

   // pages/blog/[id].js
   export async function getStaticProps(context) {
     const { params } = context;
     // Получаем данные для конкретного поста блога, например, из API
     const postData = await fetchPostData(params.id);
   
     return {
       props: {
         postData,
       },
       // Регенерация страницы каждые 10 секунд (см. ниже про ISR)
       revalidate: 10,
     };
   }
   

2. getStaticPaths: Обязательна для страниц с динамическими маршрутами (например, pages/blog/[id].js). Она определяет, для каких конкретных значений параметров (id) должны быть сгенерированы статические страницы на этапе сборки.

   // pages/blog/[id].js
   export async function getStaticPaths() {
     // Получаем список всех возможных ID постов
     const paths = await getAllPostIds();
   
     return {
       paths: paths.map((id) => ({ params: { id } })),
       // Если пользователь запросит страницу с ID, для которого нет статического файла,
       // Next.js может попытаться сгенерировать её "на лету" (fallback: true) или показать 404
       fallback: 'blocking',
     };
   }
   

Преимущества Static Generation

• Максимальная производительность: Готовый HTML отдаётся мгновенно с CDN. После загрузки HTML страница гидратируется (гидратация) и становится полностью интерактивным React-приложением.
• Высокий рейтинг SEO: Поисковые ботам не нужно выполнять JavaScript для индексации контента, так как весь HTML уже присутствует в ответе сервера.
• Устойчивость и масштабируемость: Отсутствие зависимости от сервера баз данных или API в режиме реального времени делает сайт устойчивым к скачкам трафика и сбоям бэкенда.
• Безопасность: Ключи API и логика доступа к данным выполняются только во время сборки и не подвержены рискам клиентской стороны.

Эволюция: Incremental Static Regeneration (ISR)

Классическая Static Generation имела недостаток: для обновления контента требовалась полная пересборка всего сайта. Next.js представил революционную концепцию Incremental Static Regeneration, которая "оживила" статические сайты.

ISR позволяет обновлять отдельные страницы после сборки, без необходимости перестраивать весь проект. Это достигается за счёт параметра revalidate в getStaticProps.

// Страница будет статически сгенерирована при сборке.
// После запроса, поступившего более чем через 60 секунд после предыдущей генерации,
// Next.js повторно сгенерирует страницу в фоне.
export async function getStaticProps() {
  const data = await fetchData();
  return {
    props: { data },
    revalidate: 60, // Страница будет регенерироваться не чаще чем раз в 60 секунд
  };
}

Как это работает?

1. Пользователь запрашивает страницу. Ему мгновенно отдаётся закэшированная статическая версия.
2. Если с момента последней генерации прошло больше времени, чем указано в revalidate, Next.js инициирует фоновую регенерацию страницы с новыми данными.
3. Следующий пользователь получит уже обновлённую версию.

Когда использовать Static Generation?

Static Generation — рекомендуемый подход по умолчанию в Next.js. Он идеально подходит для:

• Маркетинговых сайтов, лендингов.
• Блогов и портфолио.
• Документации.
• Интернет-магазинов (каталоги товаров).
• Любого контента, который можно подготовить заранее и который не меняется с каждым запросом пользователя.

Вывод

Static Generation — это мощная модель рендеринга, превращающая динамическое React-приложение в набор сверхбыстрых, безопасных и SEO-дружественных статических файлов. В сочетании с Incremental Static Regeneration она стирает границы между статическими и динамическими сайтами, позволяя создавать высокопроизводительные веб-приложения, которые одновременно быстро работают и обладают актуальным контентом. Это одна из ключевых технологий, сделавших Next.js фреймворком выбора для современной веб-разработки.