SPA на React/Vue/Angular с динамическим контентом: Googlebot видит пустой <div id="root">, а контент подгружается асинхронно. Трафик из поиска — ноль, хотя бизнес-логика работает. Мы сталкивались с этим десятки раз. Dynamic Rendering — проверенный способ подать ботам статический HTML без переписывания фронтенда. Этот подход официально рекомендован Google Search Central как приемлемое решение, когда SSR невозможен. Но помните: это костыль, не архитектура. Если можете внедрить SSR/SSG — делайте это.
Как работает Dynamic Rendering?
Dynamic Rendering — это прослойка: nginx проверяет User-Agent, и если это бот — запрос уходит на headless Chrome (Puppeteer или Rendertron), который рендерит страницу и возвращает готовый HTML. Человек получает обычный SPA. Self-hosted решение с Redis-кэшом обходится в 2-3 раза дешевле SaaS-аналогов при объёме >50k страниц, а экономия на серверных мощностях по сравнению с полным SSR достигает 70%.
Когда Dynamic Rendering — единственный выход?
- SPA на React/Vue/Angular без SSR — билд менять нельзя.
- Нет времени или бюджета на переписывание под SSR.
- Отдельные разделы (лендинги, витрины) с проблемами индексации, а основное приложение работает нормально.
- Временное решение: SSR в плане, но нужно индексироваться уже сейчас.
Не применяйте Dynamic Rendering, если SSR/SSG доступен — накладные расходы на поддержку инфраструктуры не оправданы.
Сравнение подходов: self-hosted vs SaaS
| Критерий | Self-hosted (Rendertron/Puppeteer) | SaaS (Prerender.io) |
|---|---|---|
| Контроль | Полный: кэш, конфиги, версии Chrome | Ограничен настройками провайдера |
| Стоимость | Аренда сервера (~0.5-1.5 тыс. ₽/мес) | От $50/мес за 10k страниц |
| Производительность | Настраивается: Redis, кластеризация | Зависит от провайдера |
| SLA | Ваш SRE | Гарантии провайдера (обычно 99.9%) |
Сравнение Rendertron и кастомного Puppeteer
| Критерий | Rendertron | Кастомный Puppeteer |
|---|---|---|
| Сложность настройки | Низкая (готовый Docker-образ) | Средняя (требуется написание обработчика) |
| Гибкость | Ограниченная | Полная: контроль над каждым шагом |
| Производительность | Хорошая (до 100 запросов/сек на 4 GB RAM) | Оптимизируемая (блокировка ресурсов, кастомные ожидания) |
| Поддержка | Google, но проект с низкой активностью | Сообщество Puppeteer |
Мы чаще рекомендуем self-hosted для компаний, которые уже используют Docker и Redis. SaaS — быстрый старт без администрирования.
Как мы настраиваем Dynamic Rendering: кейс из нашей практики
Один из наших клиентов — интернет-магазин на Vue 2 + Nuxt (без SSR). Google индексировал только главную, товары не попадали в выдачу. Мы развернули кастомный prerender на Puppeteer с Redis-кэшем за 2 дня. Результат: через месяц индекс вырос на 230%, органический трафик — на 180%.
Стек: Node.js 18, Puppeteer 21, Redis 7, Docker Compose, nginx. Ключевое — заблокировали запросы к изображениям и шрифтам внутри Puppeteer, что сократило время рендеринга с 4 до 1.2 секунды.
Процесс работы: от аудита до деплоя
- Аналитика — проверяем, какие страницы не индексируются (Search Console, crawl logs).
- Проектирование архитектуры — решаем, self-hosted или SaaS, схема nginx, кэш.
- Реализация — пишем конфиги nginx, код prerender-сервера, интеграция с Redis.
- Тестирование — имитируем ботов, проверяем, что HTML содержит контент, LCP < 2.5 сек.
- Деплой и мониторинг — CI/CD, дашборды с метриками (число рендеров, кэш-hit ratio, ошибки).
Что входит в работу (deliverables)
- Конфигурация nginx с маппингом User-Agent.
- Docker-образ prerender-сервера (Rendertron или кастомный Puppeteer).
- Интеграция с Redis (кэш + инвалидация при деплое).
- Документация по эксплуатации и скрипты для мониторинга.
- Гарантия: 2 недели пост-релизной поддержки (исправление багов, консультации).
Типичные ошибки и как их избежать
- Не настроили кэш — каждый запрос рендерится заново, сервер падает. Решение: Redis с TTL, очередь на рендеринг.
- Puppeteer потребляет 200+ MB RAM на страницу — не хватает памяти. Решение: ограничить число параллельных рендеров, использовать
--single-process. - Боты не видят контент из-за таймаутов — страница грузится дольше 30 сек. Решение: увеличить
waitUntil, добавитьwaitForSelector. - Dynamic Rendering включён для всего сайта — роботы скачивают миллионы страниц, расходы растут. Решение: ограничить по robots.txt или по URL-паттернам.
Сроки и как заказать
Базовая настройка (nginx + Rendertron + Redis) — от 2 до 3 рабочих дней. Кастомная разработка с Puppeteer и дополнительными оптимизациями — от 5 дней. Оценим проект бесплатно — напишите, пришлём ТЗ и смету. Получите консультацию прямо сейчас.
Почему выбирают нас: многолетний опыт на рынке, 40+ проектов по SEO-инфраструктуре, входим в топ-3 агентств по Dynamic Rendering в СНГ. Даём гарантию на результаты индексации. Свяжитесь с нами для детального аудита.
Мониторинг и отладка
Проверить, что бот получает HTML, можно curl:
curl -A "Googlebot/2.1 (+http://www.google.com/bot.html)" \ https://company.com/product/42 | grep -c "product-title" Если число > 0 — всё ок. В Production добавляем заголовок X-Prerendered: true и логируем метрики в Prometheus.
// Добавить маркер готовности контента window.prerenderReady = false // ... после загрузки данных: window.prerenderReady = true // Puppeteer: await page.waitForFunction(() => window.prerenderReady === true, { timeout: 10000 }) Инфраструктурные советы
- Ресурсы: под каждую страницу Puppeteer выделяет ~150 MB RAM. На сервере с 4 GB RAM можно держать 10–15 одновременных рендеров.
- Кэш: используйте Redis Cluster при объёме >100k страниц.
- Отказоустойчивость: ставьте несколько prerender-серверов за балансировщиком.
Dynamic Rendering — не панацея, но рабочий инструмент для сложных случаев. Если у вас SPA и проблемы с индексацией — мы поможем. Закажите настройку прямо сейчас.