SPA, MPA, SSR, SSG: в чем разница?
И SSG, и SSR технически могут быть основой для MPA, но в современном вебе эти понятия чаще рассматривают как разные стратегии рендеринга, которые могут применяться как в MPA, так и в SPA.
Коротко о том, как они соотносятся:
1. SSR (Server-Side Rendering) и MPA
Классические MPA работают именно по принципу SSR: сервер формирует полный HTML-код страницы при каждом запросе пользователя.
- Связь: SSR — это «двигатель» традиционных многостраничных сайтов.
- Современный контекст: Сейчас SSR часто используют внутри SPA-фреймворков (например, Next.js), чтобы поисковики видели готовый контент, хотя само приложение остается «одностраничным» после первой загрузки.
2. SSG (Static Site Generation) и MPA
SSG — это генерация всех страниц сайта заранее (на этапе сборки) в виде готовых HTML-файлов.
- Связь: Результатом работы SSG-генератора является набор статичных HTML-файлов, что по структуре и есть многостраничное приложение (MPA).
- Примеры: Блоги на Hugo, Jekyll или документация.
Итог: в чем разница?
Хотя SSG и SSR создают много страниц (как MPA), сегодня их разделяют по времени генерации контента:
| Термин | Когда создается страница? | Тип архитектуры / Как работает |
|---|---|---|
| MPA | Всегда на сервере (традиционный подход) | Многостраничная |
| SSR | В момент запроса пользователя | Многостраничная или SPA (с гидратацией) |
| SSG | В момент сборки проекта (билда) | Статический сайт (MPA или SPA) |
| SPA | В браузере (клиентский рендеринг - CSR) | Одностраничная |
Современные инструменты (Next.js, Nuxt.js) позволяют смешивать эти подходы: например, главная страница может быть SSG, каталог товаров — SSR, а личный кабинет — SPA.