Определение
Frontend Rendering — это способ, которым интернет-магазин превращает код (HTML, CSS, JavaScript) в готовую страницу, которую видит покупатель. В DTC и e-commerce контексте это не просто техническая деталь: от выбранной стратегии рендеринга напрямую зависят скорость загрузки, индексация в поиске, конверсия и стоимость инфраструктуры.
Когда клиент открывает карточку товара, браузер должен получить разметку. Вопрос лишь в том, где и когда эта разметка собирается: на сервере, в браузере или заранее — на этапе сборки. Именно это и определяет четыре базовых подхода: CSR, SSR, SSG и ISR.
Аналогия
Представьте шоурум вашего бренда:
- CSR — это пустой магазин, куда курьер привозит мебель уже после открытия. Покупатель входит, видит голые стены и ждёт 2–4 секунды, пока всё расставят. Зато дальше навигация мгновенная.
- SSR — продавец собирает витрину под каждого гостя заново, прямо при входе. Всегда актуально, но если гостей много — очередь на входе.
- SSG — витрина собрана заранее, ещё до открытия. Открывается мгновенно, но обновить ценник можно только пересобрав весь магазин.
- ISR — гибрид: витрина собрана заранее, но раз в N секунд автоматически обновляется в фоне. Посетитель всегда видит свежую версию, не дожидаясь пересборки.
Формула
Ключевая метрика, которую оптимизирует рендеринг, — Time to First Byte (TTFB) и Largest Contentful Paint (LCP):
LCP ≈ TTFB + Время загрузки ресурсов + Время рендеринга
Для CSR первый контентный рендер зависит от JS:
LCP(CSR) ≈ TTFB + Download_JS + Parse_JS + Hydration + Render
Для SSG/ISR HTML уже готов, поэтому:
LCP(SSG) ≈ TTFB + Render (TTFB минимален, т.к. отдаётся статика с CDN)
Практический ориентир: каждые +100 мс к LCP снижают конверсию e-commerce примерно на 0,6–1 %. При среднем чеке 4 500 ₽ и 10 000 сессий в день задержка в 1 секунда может стоить магазину порядка 40–90 тыс. ₽ выручки в сутки.
Сравнительная таблица
| Подход | Где рендерится | SEO | Скорость первого рендера | Актуальность данных | Когда использовать в DTC |
|---|---|---|---|---|---|
| **CSR** | В браузере | Слабое (нужен JS) | Медленно (2–4 с) | Мгновенная | Личный кабинет, корзина, админка |
| **SSR** | На сервере при запросе | Отличное | Средне (300–800 мс TTFB) | Мгновенная | Карточка товара с персональными ценами |
| **SSG** | На этапе сборки | Отличное | Очень быстро (<100 мс) | Устаревает до пересборки | Блог, лендинги, статические страницы |
| **ISR** | На сборке + фоновая ревалидация | Отличное | Очень быстро | Обновляется по таймеру | Каталог, категории, топ-товары |
Применение в DTC-сценариях
1. Главная страница и каталог. Оптимально — ISR с revalidate 60 секунд. Вы получаете статическую скорость отдачи (LCP ~0,9–1,2 с) и при этом остатки и цены обновляются раз в минуту. Для магазина с 5 000 SKU это критично: полная пересборка SSG заняла бы 8–15 минут, а ISR обновляет только посещённые страницы.
2. Карточка товара. Здесь чаще всего нужен SSR или гибрид SSR + ISR: персонализированные цены, наличие по складу, рекомендации. Если персонализации нет — смело используйте ISR.
3. Корзина и оформление заказа. Только CSR. Эти страницы не индексируются, зато требуют мгновенной реакции на действия пользователя. SSR здесь даст лишнюю нагрузку на сервер без выгоды.
4. Контент для SEO. Блог, гайды, страницы коллекций — SSG. Они меняются редко, а статика с CDN отдаётся за 30–80 мс по всему миру.
5. Персонализированные лендинги. Edge SSR (рендеринг на CDN-узле рядом с пользователем) — TTFB падает с 600 мс до 80–150 мс.
Частые ошибки
- «Поставим CSR везде, это проще». Каталог на чистом CSR теряет до 40 % органического трафика: Google индексирует медленнее, а мобильные пользователи уходят до гидратации.
- Путать SSR и SSG по стоимости. SSR на каждый запрос = серверные ресурсы. При 100 000 визитов в сутки SSR может стоить в 5–10 раз дороже, чем SSG/ISR на CDN.
- Игнорировать hydration. Даже с быстрым SSR страница «замирает», пока не загрузится JS. Если бандл весит 800 КБ, интерактивность приходит через 2–3 с после первого рендера.
- Ставить слишком короткий revalidate в ISR. revalidate: 1 превращает ISR в подобие SSR и убивает всю экономию. Разумный минимум для каталога — 30–60 секунд.
- Забывать про кэш-инвалидацию. После смены цены или распродажи нужно явно триггерить ревалидацию, иначе клиент увидит старую цену — это прямой путь к жалобам и возвратам.
- Одна стратегия на весь сайт. В зрелых DTC-проектах всегда микс: SSG для контента, ISR для каталога, SSR для карточек, CSR для корзины.
Связанные термины
CSR (Client-Side Rendering), SSR (Server-Side Rendering), SSG (Static Site Generation), ISR (Incremental Static Regeneration), Hydration, TTFB, LCP, Core Web Vitals, Edge Rendering, CDN, Revalidation, Headless Commerce, Jamstack.
