Оптимизация генерации статики через Next.js

Строительство веб-сайта с большим количеством динамических страниц требует тщательного подхода к статической генерации. На сайте BabyNamePick.com мы сталкились с этой проблемой, имея более 1,500 имен, 30 происхождений и десятки стилей. Для решения этой задачи мы использовали функцию generateStaticParams в Next.js для предварительной отрисовки более 3,500 страниц.

Структура страниц

Наш сайт имеет три типа динамических страниц:

Страницы имен (/name/[slug]) - одна страница на имя (более 1,500)
Страницы происхождения (/origin/[origin]) - одна страница на происхождение (более 30)
Страницы стилей (/style/[style]) - одна страница на стиль (более 20)
Статьи в блоге (/blog/[slug]) - контент для SEO (более 85) Помимо этого, у нас есть статические страницы: главная страница, страница "О нас", поиск, категории.

Реализация

Для страниц имен мы используем следующий код:

// app/name/[slug]/page.tsx
export async function generateStaticParams() {
  const names = getAllNames() // читаем из data/names.json
  return names.map((name) => ({ slug: name.name.toLowerCase().replace(/\s+/g, '-') }))
}

Аналогично, для страниц происхождения:

// app/origin/[origin]/page.tsx
export async function generateStaticParams() {
  const origins = getUniqueOrigins()
  return origins.map((origin) => ({ origin }))
}

Производительность

Наша реализация показала следующие результаты:

Время сборки: примерно 90 секунд для 3,500 страниц
Размер страницы: в среднем 15 КБ (HTML + минимальный JS)
Оценка Lighthouse: 95+ по всем показателям
Время до первого байта (TTFB): менее 100 мс (сервис Vercel edge)

Преимущества для SEO

Каждая предварительно отрисованная страница получает:

Уникальный <title> и <meta description>
Структурированные данные (JSON-LD) для имени
Внутренние ссылки на связанные имена, происхождение и стиль
Канонический URL
Теги Open Graph Это позволяет Google мгновенно индексировать каждую страницу, без необходимости рендеринга JavaScript.

Карта сайта

Мы генерируем динамическую карту сайта в /sitemap.xml, которая включает все 3,500+ URL с правильными датами последней модификации. Google Search Console показывает стабильный рост индексации с момента запуска.

Советы для крупных статических сайтов

Держите источник данных простым - один файл JSON лучше базы данных для менее 10,000 страниц
Используйте ISR в качестве резервного варианта - revalidate: 86400 ловит страницы, пропущенные во время сборки
Отслеживайте время сборки - оно растет линейно с количеством страниц
Оптимизируйте изображения во время сборки - не полагайтесь на оптимизацию во время выполнения для статических страниц
Используйте generateMetadata - динамические мета-теги важны для статических страниц

Оптимизация генерации статических страниц с помощью Next.js