Для чего используется SSG?

Для чего используется SSG (Static Site Generation)

Определение и назначение

SSG — это подход к генерации веб-сайтов, при котором HTML-страницы создаются во время сборки (build time), а не во время запроса пользователя (request time). Готовые статические файлы затем развёртываются на сервер и отправляются клиентам без дополнительной обработки.

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

В Next.js с SSG процесс выглядит так:

// pages/posts/[id].tsx
export async function getStaticPaths() {
  // Определяем, какие маршруты нужно предварительно сгенерировать
  const posts = await fetchAllPosts();
  return {
    paths: posts.map(post => ({
      params: { id: post.id }
    })),
    fallback: false // или blocking для новых страниц
  };
}

export async function getStaticProps(context) {
  const { id } = context.params;
  const post = await fetchPostById(id);
  
  return {
    props: { post },
    revalidate: 3600 // ISR: переиндексировать каждый час
  };
}

export default function Post({ post }) {
  return <article>{post.content}</article>;
}

При npm run build:

1. Framework получает список всех ID постов
2. Для каждого ID вызывает getStaticProps
3. Генерирует HTML файлы
4. Сохраняет их в .next/out директорию
5. Размещает на CDN

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

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

• Нулевое время на сервере (0ms server response time)
• CDN может кэшировать контент на edge-серверах по всему миру
• Браузер загружает уже готовый HTML

// Клиент получает готовый HTML за 50мс вместо 500мс
// Улучшение в 10 раз!

SEO:

• Весь контент на странице при загрузке (видна поисковикам)
• Гарантированная индексация (нет wait for JavaScript)
• Быстрая загрузка улучшает Core Web Vitals

Безопасность:

• Нет динамического кода на сервере
• Нет direct доступа к БД из браузера
• Меньше точек атаки

Стоимость хостинга:

• Нет backend сервера (статический хост дешевле в 10+ раз)
• Можно использовать бесплатные хосты (Vercel, Netlify, GitHub Pages)
• Нет нагрузки на database

Масштабируемость:

• Справляется с миллионами одновременных пользователей
• Нет bottleneck на сервере

Типичные использования

Блоги и документация:

// Контент меняется нечасто
// Нужна максимальная производительность
// Используют SSG + ISR для переиндексации

Маркетинг сайты:

// Адаптай.io, другие SaaS лендинги
// Нужен быстрый загрузок и SEO
// Редко обновляется контент

Каталоги продуктов:

// Тысячи страниц товаров
// SSG + ISR регенерирует при изменении цены

ISR (Incremental Static Regeneration)

Улучшение SSG для часто обновляемого контента:

export async function getStaticProps() {
  const data = await fetchData();
  
  return {
    props: { data },
    revalidate: 60 // переиндексировать каждые 60 секунд
  };
}

Когда пользователь запрашивает страницу:

1. Если прошло меньше 60 секунд — отправляет закэшированный HTML
2. Если больше 60 секунд — в background регенерирует страницу
3. Следующему пользователю отправляет новую версию

SSG vs SSR vs CSR

SSG (Static Site Generation):

• Build time: долго
• Runtime: быстро (0ms сервер)
• Обновление: при каждом build
• Идеален для: статического контента, блогов, лендингов

SSR (Server-Side Rendering):

• Build time: нормально
• Runtime: медленно (зависит от сервера)
• Обновление: на каждый запрос
• Идеален для: динамического контента, персонализации

CSR (Client-Side Rendering):

• Build time: быстро
• Runtime: очень медленно (JavaScript + API запросы)
• Обновление: на каждый запрос
• Идеален для: интерактивного контента, Real-time данных

Ограничения SSG

Невозможно использовать для:

• Контента, который зависит от запроса пользователя (авторизация, локация)
• Данных, обновляемых в реальном времени (чат, лайв обновления)
• Динамических параметров запроса (поиск, фильтрация)

// ❌ Нельзя с SSG
export async function getStaticProps(context) {
  // context.query.search — не доступна при SSG!
  const results = await search(context.query.search);
}

// ✅ Правильно: CSR для динамических фильтров
export default function Search() {
  const [query, setQuery] = useState();
  const [results, setResults] = useState([]);
  
  useEffect(() => {
    if (query) fetch(`/api/search?q=${query}`).then(r => setResults(r));
  }, [query]);
}

Заключение

SSG — идеальный выбор для сайтов, где контент известен на момент сборки. Это обеспечивает максимальную производительность, улучшает SEO и снижает затраты на хостинг. Для динамического контента используют гибридные подходы (SSG + ISR + CSR).