OpenGraph та соціальні краулери в SPA: проксіювання ботів на Edge та Nginx

<div id="root"></div>
<script src="/bundle.js"></script>

+-------------------------------------------------------------------------+
|             АРХІТЕКТУРА ДИНАМІЧНОГО ПРОКСІЮВАННЯ БОТІВ                  |
+-------------------------------------------------------------------------+

                   [ Вхідний HTTP GET Запит ]
                                |
                                v
                +-------------------------------+
                | Прикордонний шлюз (Edge/Nginx)|
                | Аналіз заголовка User-Agent   |
                +-------------------------------+
                                |
             +------------------+------------------+
             |                                     |
    [ Звичайний Браузер ]                  [ Соціальний Бот ]
    (Chrome, Safari, Firefox)             (TelegramBot, TwitterBot, etc.)
             |                                     |
             v                                     v
    +-------------------+                 +-------------------+
    |  Статичний CDN    |                 |  Edge Worker /    |
    |  Origin Storage   |                 |  Meta Prerender   |
    +-------------------+                 +-------------------+
             |                                     |
     Віддача index.html                    Запит даних в API ->
     + React JS Bundle                     Генерація легкого HTML
             |                             з усіма <meta og:...>
             v                                     |
    Клієнтський рендеринг                          v
    у браузері користувача                Віддача 200 OK + теги
                                          (Vary: User-Agent)

# Визначення соціальних краулерів та пошукових ботів без JS
map $http_user_agent $is_social_bot {
    default 0;
    ~*(telegrambot|twitterbot|facebookexternalhit|whatsapp|discordbot|slackbot|vkshare|linkedinbot|applebot) 1;
}

server {
    listen 443 ssl http2;
    server_name agenticlab.dev;

    # SSL сертифікати та базові налаштування...
    root /var/www/agenticlab/spa/dist;
    index index.html;

    location / {
        # КРИТИЧНО ВАЖЛИВО: сповіщаємо CDN і браузери про варіативність відповіді за User-Agent
        add_header Vary "User-Agent" always;

        # Якщо запит прийшов від бота — проксіюємо на Node.js сервіс метаданих
        if ($is_social_bot = 1) {
            proxy_pass http://127.0.0.1:3001;
            break;
        }

        # Звичайним користувачам віддаємо статичний SPA з підтримкою HTML5 History API
        try_files $uri $uri/ /index.html;
    }

    # Статичні асети віддаються безпосередньо без проксіювання
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2)$ {
        expires 1y;
        add_header Cache-Control "public, max-age=31536000, immutable";
        try_files $uri =404;
    }
}

interface Env {
  ASSETS: { fetch: typeof fetch };
  API_BASE_URL: string;
}

// Регулярний вираз для виявлення краулерів
const BOT_UA_REGEX =
  /telegrambot|twitterbot|facebookexternalhit|whatsapp|discordbot|slackbot|vkshare|linkedinbot|applebot/i;

export default {
  async fetch(request: Request, env: Env): Promise<Response> {
    const userAgent = request.headers.get('User-Agent') || '';
    const url = new URL(request.url);

    // Ігноруємо запити до статичних асетів
    const isStaticAsset = /\.(js|css|png|jpg|jpeg|gif|ico|svg|woff2?)$/i.test(url.pathname);

    // Якщо це не бот або запит до асету — віддаємо оригінальний SPA-бандл
    if (isStaticAsset || !BOT_UA_REGEX.test(userAgent)) {
      const response = await env.ASSETS.fetch(request);
      const newHeaders = new Headers(response.headers);
      newHeaders.append('Vary', 'User-Agent');
      return new Response(response.body, {
        status: response.status,
        headers: newHeaders,
      });
    }

    // Обробка запиту бота: витягуємо метадані через API
    return await handleBotRequest(url, env);
  },
};

async function handleBotRequest(url: URL, env: Env): Promise<Response> {
  const pathParts = url.pathname.split('/').filter(Boolean);
  let title = 'Fullstack Agentic Lab — Освітня платформа';
  let description = 'Поглиблені курси з веб-розробки та системної архітектури.';
  let ogImage = 'https://agenticlab.dev/assets/default-og.png';

  try {
    // Приклад: парсинг динамічного роуту /courses/:slug
    if (pathParts[0] === 'courses' && pathParts[1]) {
      const slug = pathParts[1];
      const apiRes = await fetch(`${env.API_BASE_URL}/api/v1/courses/${slug}`);
      
      if (apiRes.ok) {
        const data = await apiRes.json() as { title: string; summary: string; coverUrl?: string };
        title = `${data.title} | Fullstack Agentic Lab`;
        description = data.summary;
        if (data.coverUrl) {
          ogImage = data.coverUrl;
        }
      }
    }
  } catch (err: unknown) {
    console.error('[Bot Proxy Error]:', err instanceof Error ? err.message : 'Unknown');
  }

  // Генерація ультралегкого HTML-шелу виключно для бота
  const metaHtml = `<!DOCTYPE html>
<html lang="uk">
<head>
  <meta charset="UTF-8">
  <title>${escapeHtml(title)}</title>
  <meta name="description" content="${escapeHtml(description)}">
  
  <!-- OpenGraph -->
  <meta property="og:type" content="website">
  <meta property="og:url" content="${url.href}">
  <meta property="og:title" content="${escapeHtml(title)}">
  <meta property="og:description" content="${escapeHtml(description)}">
  <meta property="og:image" content="${ogImage}">
  
  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="${escapeHtml(title)}">
  <meta name="twitter:description" content="${escapeHtml(description)}">
  <meta name="twitter:image" content="${ogImage}">
</head>
<body>
  <h1>${escapeHtml(title)}</h1>
  <p>${escapeHtml(description)}</p>
</body>
</html>`;

  return new Response(metaHtml, {
    status: 200,
    headers: {
      'Content-Type': 'text/html; charset=utf-8',
      'Vary': 'User-Agent',
      'Cache-Control': 'public, max-age=3600, s-maxage=86400',
    },
  });
}

function escapeHtml(str: string): string {
  return str
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#039;');
}