SSR vs CSR vs SSG

Представь собес по вебу. Тебя спрашивают: в чем разница между SSR, CSR и SSG?

Это три стратегии рендера UI. Если выбрать не ту, можно легко просесть по скорости и SEO.

▪️SSR (Server Side Rendering)

Пользователь запрашивает страницу, сервер подтягивает данные, собирает HTML, подключает стили и отдаёт уже готовую разметку в браузер. Потом на клиенте подгружается JS и “оживляет” страницу, это называется hydration.

Плюсы:

▪️Хорошее SEO
▪️Контент появляется быстрее

Минусы:

▪️Интерактивность не мгновенная, пока hydration не отработает

Лучше всего для:

▪️блоги, новости, e-commerce
▪️всё, где важны SEO и свежие данные

CSR (Client Side Rendering)

Пользователь запрашивает страницу, сервер отдаёт пустой HTML плюс ссылки на JS/CSS. Дальше браузер загружает бандлы, JS строит страницу и накатывает стили.

Плюсы:

▪️После загрузки супер-интерактивно

Минусы:

▪️Плохое SEO (до выполнения JS страница фактически пустая)
▪️Медленный first paint/первый контент, особенно на слабых устройствах

Лучше всего для:

▪️дашборды, SaaS, внутренние панели
▪️всё за логином, где SEO не важно

SSG (Static Site Generation)

HTML генерируется заранее на этапе сборки/деплоя. Когда пользователь запрашивает страницу, сервер просто отдаёт готовый HTML файл. Никаких вычислений “на лету”.

Плюсы:

▪️Самый быстрый рендер
▪️Отличное SEO

Минусы:

▪️Плохо подходит для динамического контента или часто меняющихся данных

Лучше всего для:

▪️портфолио, документация, лендинги
▪️контент, который редко обновляется

В одну строку

▪️SSR: собирается на сервере на каждый запрос
▪️CSR: собирается в браузере после загрузки JS
▪️SSG: собирается при билде и отдается мгновенно

@WebDev_Plus