Ви запустили 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.
Вартість базового плану Prerender.io становить $99 на місяць для 10 000 запитів. Економія на серверних ресурсах може досягати $500–$1000 на місяць порівняно з виділеним SSR-сервером. За даними документації Prerender.io, середній час окупності інтеграції — 2 місяці.
Що входить у налаштування під ключ
| Етап | Результат |
|---|---|
| Аналіз конфігурації | Схема User-Agent, визначення фреймворку |
| Налаштування nginx/Express/middleware | Робочий prerender для ботів |
| Налаштування кешування | Автоматичний рекеш при деплої |
| Прекеш по sitemap | Всі сторінки в кеші |
| Перевірка | curl-тести, звіт по індексації |
| Документація | Інструкція для команди, доступи |
Терміни та вартість
Базове налаштування (nginx + прекеш) — від 0,5 до 1 робочого дня. Складна інтеграція (кілька middleware, кастомний рекеш) — до 2 днів. Вартість фіксована і розраховується індивідуально. Ми гарантуємо, що після налаштування Googlebot почне бачити контент. Наша команда має 5 років досвіду і виконала понад 50 проектів з SEO-оптимізації SPA.
Замовте налаштування Prerender.io — отримайте консультацію інженера. Зв'яжіться з нами, щоб обговорити ваш проект. Отримайте консультацію інженера — ми допоможемо обрати оптимальне рішення.