Интеграция за 5 минут

Подключите динамический рендеринг к вашему сайту с помощью нескольких строк конфигурации

Конфигурация Nginx

Добавьте в секцию server вашего конфигурационного файла:

location / {
    set $prerender 0;
    if ($http_user_agent ~* "googlebot|yandex|bingbot|baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator") {
        set $prerender 1;
    }
    if ($args ~ "_escaped_fragment_") {
        set $prerender 1;
    }
    if ($http_user_agent ~ "Prerender") {
        set $prerender 0;
    }
    if ($uri ~* "\.(js|css|xml|less|png|jpg|jpeg|gif|pdf|doc|txt|ico|rss|zip|mp3|rar|exe|wmv|doc|avi|ppt|mpg|mpeg|tif|wav|mov|psd|ai|xls|mp4|m4a|swf|dat|dmg|iso|flv|m4v|torrent|ttf|woff|svg|eot)") {
        set $prerender 0;
    }

    if ($prerender = 1) {
        proxy_pass https://api.vrender.ru/render?url=$scheme://$host$request_uri;
        proxy_set_header X-Api-Key ВАШ_API_КЛЮЧ;
    }

    # Ваш SPA сервер
    proxy_pass http://localhost:3000;
}

Замените ВАШ_API_КЛЮЧ на реальный ключ из личного кабинета.

Конфигурация Apache (.htaccess)

<IfModule mod_rewrite.c>
    RewriteEngine On
    
    # Если бот или _escaped_fragment_
    RewriteCond %{HTTP_USER_AGENT} (googlebot|yandex|bingbot|baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora\ link\ preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator) [NC,OR]
    RewriteCond %{QUERY_STRING} _escaped_fragment_
    
    # Не перенаправляем статические файлы
    RewriteCond %{REQUEST_URI} !\.(js|css|xml|less|png|jpg|jpeg|gif|pdf|doc|txt|ico|rss|zip|mp3|rar|exe|wmv|doc|avi|ppt|mpg|mpeg|tif|wav|mov|psd|ai|xls|mp4|m4a|swf|dat|dmg|iso|flv|m4v|torrent|ttf|woff|svg|eot) [NC]
    
    RewriteRule ^(.*)$ https://api.vrender.ru/render?url=https://%{HTTP_HOST}/$1 [P,L]
    RequestHeader set X-Api-Key "ВАШ_API_КЛЮЧ"
</IfModule>

Не забудьте включить модули mod_rewrite, mod_proxy и mod_headers.

Cloudflare Workers

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  const userAgent = request.headers.get('User-Agent') || '';
  const bots = /googlebot|yandex|bingbot|baiduspider|twitterbot|facebookexternalhit/i;
  const url = new URL(request.url);
  
  if (bots.test(userAgent) || url.searchParams.has('_escaped_fragment_')) {
    const apiUrl = 'https://api.vrender.ru/render?url=' + encodeURIComponent(request.url);
    const response = await fetch(apiUrl, {
      headers: {
        'X-Api-Key': 'ВАШ_API_КЛЮЧ'
      }
    });
    if (response.ok) return response;
  }
  
  // Иначе возвращаем оригинальный SPA
  return fetch(request);
}

Промежуточный обработчик Express.js

const axios = require('axios');

function prerenderMiddleware(req, res, next) {
  const userAgent = req.headers['user-agent'] || '';
  const bots = /googlebot|yandex|bingbot|baiduspider/i;
  const isBot = bots.test(userAgent) || '_escaped_fragment_' in req.query;

  if (!isBot) return next();

  const url = 'https://api.vrender.ru/render?url=' + encodeURIComponent(req.protocol + '://' + req.get('host') + req.originalUrl);
  axios.get(url, {
    headers: { 'X-Api-Key': 'ВАШ_API_КЛЮЧ' },
    responseType: 'text'
  })
  .then(response => res.send(response.data))
  .catch(() => next());
}

app.use(prerenderMiddleware);

Универсальный API-запрос

Вы можете отправлять GET-запросы напрямую к нашему эндпоинту.

GET https://api.vrender.ru/render?url=https://example.com/page
Header: X-Api-Key: ВАШ_API_КЛЮЧ

Пример ответа:

HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8

<!DOCTYPE html>
<html>
... полностью отрендеренный HTML вашего SPA ...
</html>

Подробнее читайте в документации.