Как работает SSR
При запросе страницы сервер выполняет всю работу по рендерингу: запрашивает данные из БД, применяет шаблон, формирует HTML и отправляет готовый документ браузеру. Браузер получает полноценную страницу с контентом без необходимости выполнять JavaScript для первоначального рендеринга.
SSR flow:
Browser → GET /product/123 → Server
→ fetch product data
→ fetch recommendations (API)
→ render HTML template
→ return full HTML
CSR flow:
Browser → GET / → Server → empty HTML + JS bundle
Browser → execute JS → fetch product/123 → render DOM
Сравнение подходов рендеринга
| Подход | SEO | Первая отрисовка (FCP) | Персонализация | Нагрузка на сервер |
|---|---|---|---|---|
| SSR | Отлично | Быстро | На сервере | Высокая |
| CSR | Плохо | Медленно | Клиентская | Низкая |
| SSG | Отлично | Очень быстро | Нет / ограничена | Минимальная |
| Hydration (SSR+CSR) | Отлично | Быстро | Серверная + клиентская | Средняя |
SSR и персонализация
Серверный рендеринг открывает самый качественный вариант персонализации: рекомендации и персонализированный контент встраиваются в HTML ещё на сервере. Пользователь видит персонализированную страницу с первого байта — без мерцания (flicker), без FOUC (Flash of Unstyled Content), без задержки клиентской инициализации.
Это особенно важно для:
— PLP — порядок товаров в листинге, персонализированный под пользователя
— Главная страница — hero-блок с персонализированными рекомендациями
— PDP — блок «Похожие товары» без задержки загрузки
Важно: при SSR-персонализации время ответа API становится критичным. Запрос к API рекомендаций блокирует HTML-рендеринг. Решение — агрессивный кеш рекомендаций или async SSR с параллельными запросами.
Кеширование в SSR
Чтобы снизить нагрузку на сервер, SSR-страницы кешируются на CDN — но это создаёт конфликт с персонализацией: нельзя отдавать разным пользователям одинаковый кешированный HTML. Стандартные подходы:
- Edge personalization — кеш хранит базовый HTML, персонализация добавляется на CDN edge через клиентский скрипт
- Fragment caching — кешируются «общие» части страницы, персонализированные фрагменты генерируются свежими
- Cookie-based routing — CDN определяет сегмент пользователя и отдаёт нужный кеш-вариант