SSR
SSR (Server-Side Rendering, серверный рендеринг) — это способ генерации HTML-страницы на сервере, а не в браузере пользователя. Когда вы запрашиваете страницу, сервер формирует готовый HTML с данными и отправляет его в браузер. Пользователь сразу видит контент, не дожидаясь загрузки JavaScript.
В чём проблема без SSR? При клиентском рендеринге (CSR) браузер сначала скачивает JavaScript-код, потом выполняет его, потом запрашивает данные у API, и только потом показывает страницу. На медленном интернете пользователь видит белый экран 3-5 секунд. Поисковые роботы могут не дождаться загрузки и не проиндексировать контент.
SSR решает обе проблемы: страница загружается быстро (первый контент виден за 200-500 мс), а поисковые роботы получают готовый HTML. При этом после загрузки страница «оживает» — JavaScript подключает интерактивность (этот процесс называется гидратация).
Next.js — самый популярный фреймворк для SSR в экосистеме React. Он позволяет комбинировать SSR, SSG (статическую генерацию) и CSR на уровне отдельных страниц — каждая страница использует тот подход, который ей подходит.
Ключевые преимущества
- HTML формируется на сервере, а не в браузере
- Быстрая загрузка — контент виден сразу
- Отличная индексация поисковиками (SEO)
- Гидратация — добавление интерактивности после загрузки
- Next.js, Nuxt.js — популярные SSR-фреймворки
Примеры
Интернет-магазины используют SSR для карточек товаров — важна скорость и SEO. Новостные сайты: контент должен быть виден сразу, без задержки. Лендинги и маркетинговые страницы: каждая секунда загрузки стоит конверсий. Этот сайт (marchcode.ru) тоже использует SSR через Next.js.
Когда это нужно
SSR нужен, когда: SEO критичен для бизнеса (магазин, блог, каталог), важна скорость первой загрузки, аудитория пользуется мобильным интернетом, нужна хорошая работа предпросмотра ссылок в соцсетях и мессенджерах.
Частые вопросы
SSR замедляет сервер?
SSR создаёт нагрузку на сервер, потому что каждый запрос требует генерации HTML. Но это решается кешированием (ISR в Next.js), CDN и правильной архитектурой. Для большинства проектов разница в нагрузке незаметна, а выигрыш в скорости и SEO — существенный.
Можно ли использовать SSR и CSR одновременно?
Да, и это стандартная практика. Публичные страницы (каталог, статьи, главная) рендерятся на сервере для SEO. Закрытые разделы (личный кабинет, дашборд) работают как SPA — серверный рендеринг там не нужен. Next.js делает это из коробки.
Где это применяется
Разработка SaaS-сервисов
Запускаем сервисы по подписке: мультитенантность, биллинг Stripe и ЮKassa, метрики MRR и churn. MVP-ядро SaaS — от 390 000 ₽ за 8–10 недель, кликабельный прототип бесплатно за 5 дней.
Как мы это делаемПродолжите изучение
