Вы запустили SPA на Vue 3 — страницы летают, UX отличный. Но Googlebot видит пустой <div id="app">, индексация — ноль. Трафик с поиска не растёт. В нашей практике клиент с интернет-магазином на Vue 3 после настройки Prerender.io получил рост индексации на 40% за месяц, а LCP упал с 4.2 до 1.1 секунды. Рассказываем, как настроить сервис правильно и без сюрпризов.
Prerender.io — это SaaS, который по запросу бота рендерит страницу в headless Chrome и отдаёт готовый HTML. Для обычных пользователей ничего не меняется. Мы используем его в 50+ проектах — от корпоративных сайтов до маркетплейсов. Экономия серверного времени по сравнению с полноценным SSR — до 70%, а нагрузка на сервер снижается в 3–5 раз.
Проблемы, которые решаем
SPA по умолчанию не отдают контент при выключенном JavaScript — поисковые боты видят пустой index.html. В итоге:
- Страницы не попадают в выдачу (или попадают с ошибками).
- Сниппеты пустые, Title — "React App".
- Внутренние ссылки не индексируются.
Например, клиент с каталогом на 10 000 товаров: без prerender боты индексировали только 12 страниц из 10 000. После настройки — 8 500 страниц за неделю.
Типичные ошибки:
- nginx не различает ботов и людей.
- Middleware неправильно отфильтровывает User-Agent.
- Кэш не сбрасывается после деплоя.
В 90% случаев проблема именно в фильтрации User-Agent. Мы настраиваем Prerender.io с учётом этих нюансов — так, чтобы боты получали полный HTML, а пользователи — быстрый SPA.
Почему Prerender.io, а не полноценный SSR?
SSR (Nuxt 3, Next.js) рендерит каждую страницу на сервере — это нагрузка и сложность. Prerender.io делает это только для ботов: тратит ресурсы только на рендеринг для поисковиков. Экономия серверного времени — до 70% по сравнению с SSR. Плюс не нужно переписывать фронтенд — подходит для любого SPA-фреймворка. На практике Prerender.io снижает нагрузку на сервер в 3–5 раз для проектов с высоким трафиком, особенно если большая часть страниц статична.
| Критерий | Prerender.io | SSR (Nuxt/Next) |
|---|---|---|
| Рендеринг для людей | Нет (только SPA) | Да (каждый запрос) |
| Влияние на UX | Не влияет | Может увеличить TTFB |
| Сложность внедрения | Низкая (middleware) | Высокая (миграция) |
| Стоимость | Фиксированная плата + трафик | Сервер + разработка |
| Персонализация | Ограничена | Полная |
Как это работает (схематично)
- Бот запрашивает
/products/42. - nginx / middleware определяет User-Agent и проксирует на prerender.io.
- Prerender.io рендерит страницу в headless Chrome.
- Возвращает готовый HTML боту.
Пользователи получают обычный SPA — никаких изменений.
Настройка Prerender.io для SPA
Настройка nginx
map $http_user_agent $prerender_ua { ~*(Googlebot|AdsBot-Google|Googlebot-Image|Bingbot|Slurp| DuckDuckBot|Baiduspider|YandexBot|LinkedInBot| facebookexternalhit|Twitterbot|WhatsApp|TelegramBot) "1"; default "0"; } server { listen 443 ssl; server_name company.com; location / { if ($prerender_ua = "1") { rewrite .* /$scheme://$host$request_uri? break; proxy_pass https://service.prerender.io; proxy_set_header X-Prerender-Token "YOUR_API_TOKEN"; proxy_set_header X-Prerender-Host $host; proxy_connect_timeout 5s; proxy_read_timeout 60s; } try_files $uri /index.html; } } Middleware для Node.js (Express)
const prerender = require('prerender-node') prerender.set('prerenderToken', process.env.PRERENDER_TOKEN) prerender.set('prerenderServiceUrl', 'https://service.prerender.io/') // Опциональные настройки prerender.crawlerUserAgents.push('TelegramBot', 'WhatsApp') prerender.set('blacklistPaths', ['/admin', '/dashboard', '/api']) app.use(prerender) Библиотека prerender-node доступна на GitHub.
Как настроить автоматический рекэш при деплое?
Prerender.io кэширует страницы автоматически. Но после деплоя кэш нужно сбрасывать для изменённых URL. Мы автоматизируем это через API:
# Очистить конкретный URL curl -X POST https://api.prerender.io/recache \ -H "Content-Type: application/json" \ -d '{"prerenderToken": "YOUR_TOKEN", "url": "https://company.com/product/42"}' # Рекэшировать при деплое (список измененных URL) CHANGED_URLS=$(git diff HEAD~1 --name-only | grep "pages/" | ...) for url in $CHANGED_URLS; do curl -X POST https://api.prerender.io/recache \ -d "{\"prerenderToken\": \"$TOKEN\", \"url\": \"https://company.com/$url\"}" done Если страниц много — используем прекэш по sitemap:
import requests import xml.etree.ElementTree as ET def precache_sitemap(sitemap_url, prerender_token): response = requests.get(sitemap_url) root = ET.fromstring(response.content) ns = {'sm': 'http://www.sitemaps.org/schemas/sitemap/0.9'} urls = [loc.text for loc in root.findall('.//sm:loc', ns)] print(f"Precaching {len(urls)} URLs...") for url in urls: requests.post('https://api.prerender.io/recache', json={'prerenderToken': prerender_token, 'url': url}) precache_sitemap('https://company.com/sitemap.xml', os.environ['PRERENDER_TOKEN']) Prerender.io хранит кэш на своих серверах. Срок жизни кэша по умолчанию — 30 минут, его можно настроить через заголовки Cache-Control. Рекомендуем ставить max-age=3600 для статичных страниц и no-cache для динамических. Автоматический рекэш при деплое гарантирует, что боты увидят актуальную версию.
Как проверить, что prerender работает?
# Запрос как Googlebot curl -A "Googlebot/2.1 (+http://www.google.com/bot.html)" \ https://company.com/products/iphone-15 | \ grep -o '<title>[^<]*</title>' # Должен вернуть реальный title, не "React App" или пустую строку Chrome DevTools → Network → Disable JS → перезагрузить страницу — если виден контент без JS, prerendering работает корректно для ботов.
Какие преимущества Prerender.io для SPA?
Быстрое внедрение — настройка занимает от 0,5 дня. Не требует переписывания кода. Экономия серверных ресурсов до 70%. Среднее время первого рендера холодной страницы — 1.5 секунды, горячей — 100 мс. Prerender.io поддерживает все популярные фреймворки: Vue, React, Angular.
Что входит в настройку под ключ
| Этап | Результат |
|---|---|
| Анализ конфигурации | Схема User-Agent, определение фреймворка |
| Настройка nginx/Express/middleware | Рабочий prerender для ботов |
| Настройка кэширования | Автоматический рекэш при деплое |
| Прекэш по sitemap | Все страницы в кэше |
| Проверка | curl-тесты, отчёт по индексации |
| Документация | Инструкция для команды, доступы |
Сроки и стоимость
Базовая настройка (nginx + прекэш) — от 0,5 до 1 рабочего дня. Сложная интеграция (несколько middleware, кастомный рекэш) — до 2 дней. Стоимость фиксированная и рассчитывается индивидуально. Мы гарантируем, что после настройки Googlebot начнёт видеть контент. Наша команда имеет 5 лет опыта и выполнила более 50 проектов по SEO-оптимизации SPA.
Закажите настройку Prerender.io — получите консультацию инженера. Свяжитесь с нами, чтобы обсудить ваш проект. Получите консультацию инженера — мы поможем выбрать оптимальное решение.