В чем разница между SSG и SSR

SSG (Static Site Generation) и SSR (Server-Side Rendering) — это два подхода к рендерингу веб-страниц.

SSG генерирует статические HTML-файлы на этапе сборки. Страницы предварительно рендерятся и раздаются как готовые файлы. Подходит для контента, который редко меняется (блоги, лендинги). Пример с Next.js:

export async function getStaticProps() {
  return { props: { data: fetchData() } };
}

SSR рендерит страницу на сервере при каждом запросе. Подходит для динамического контента (персональные данные, актуальные новости). Пример:

export async function getServerSideProps() {
  return { props: { user: fetchUser(req) } };
}

Ключевые различия:

• SSG быстрее (кешируется), SSR требует серверных ресурсов.
• SSG не подходит для часто обновляемых данных, SSR — да.
• SSG дешевле в хостинге (можно на CDN), SSR требует сервера.