Настройка Prerendering для SPA-сайтов (Prerender.io)

Настройка Prerendering для SPA-сайтов (Prerender.io)

Prerender.io — SaaS-сервис для предварительного рендеринга SPA-страниц. Автоматически обнаруживает поисковых ботов и отдаёт им полностью отрендеренный HTML вместо пустого index.html.

Как это работает

1. Бот запрашивает /products/42
2. nginx перехватывает запрос и проксирует на prerender.io
3. Prerender.io рендерит страницу в headless Chrome
4. Возвращает готовый HTML боту

Пользователи получают обычный 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 (Express/Node.js)

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.io

Сервис кэширует страницы автоматически. Управление через дашборд или 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-based прекэш

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'])

Проверка работы

# Запрос как 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

• Платный от $9/мес, лимиты на количество рендеров
• Задержка первого рендера (холодный старт)
• Не подходит для страниц с персонализацией (контент зависит от пользователя)
• Рендеринг без cookies пользователя

Срок выполнения

Настройка Prerender.io с nginx middleware и прекэшем — 0,5–1 рабочий день.