Реалізація Edge Caching для прискорення сайту

Edge Caching та прискорення веб-сайту

Edge caching — це збереження контенту на серверах CDN поблизу користувача. Замість запиту до origin-сервера в Європі користувач в Азії отримує відповідь з найближчого edge node за 10–30ms замість 200–300ms.

Cloudflare: Налаштування кешування

# Cache Rules через Cloudflare API
curl -X POST "https://api.cloudflare.com/client/v4/zones/{zone_id}/rulesets" \
  -H "Authorization: Bearer {token}" \
  -H "Content-Type: application/json" \
  --data '{
    "name": "Cache Rules",
    "kind": "zone",
    "phase": "http_request_cache_settings",
    "rules": [
      {
        "expression": "(http.request.uri.path matches \"^/api/\")",
        "action": "set_cache_settings",
        "action_parameters": {
          "cache": true,
          "edge_ttl": {
            "mode": "override_origin",
            "default": 60
          },
          "browser_ttl": {
            "mode": "override_origin",
            "default": 0
          }
        },
        "description": "Cache API responses 60s"
      },
      {
        "expression": "(http.request.uri.path matches \"\.(js|css|woff2|png|webp|avif)$\")",
        "action": "set_cache_settings",
        "action_parameters": {
          "cache": true,
          "edge_ttl": {
            "mode": "override_origin",
            "default": 2592000
          },
          "browser_ttl": {
            "mode": "override_origin",
            "default": 31536000
          }
        },
        "description": "Static assets: 30 days edge, 1 year browser"
      }
    ]
  }'

HTTP Cache-Control заголовки

Правильні заголовки на origin — основа ефективного CDN-кешування:

# Nginx: статичні ресурси (з хешем у імені → вічне кешування)
location ~* \.(js|css|woff2|ico)$ {
  add_header Cache-Control "public, max-age=31536000, immutable";
  add_header Vary "Accept-Encoding";
  gzip_static on;
}

# Зображення
location ~* \.(jpg|jpeg|png|webp|avif|svg|gif)$ {
  add_header Cache-Control "public, max-age=2592000";  # 30 днів
  add_header Vary "Accept";
}

# HTML: не кешувати в браузері, але дозволити CDN
location / {
  add_header Cache-Control "public, max-age=0, s-maxage=300, must-revalidate";
  # s-maxage=300: CDN кешує 5 хвилин
  # max-age=0: браузер завжди перевіряє свіжість
}

# API endpoints: кешування залежить від даних
location /api/products {
  add_header Cache-Control "public, max-age=60, s-maxage=60";
  add_header Vary "Accept-Language, Accept-Encoding";
}

# Приватні дані — не кешувати на CDN
location /api/user {
  add_header Cache-Control "private, no-cache, no-store";
}

Next.js: Керування кешем

// App Router: fetch з контролем кешу
async function getProducts() {
  const res = await fetch('https://api.mysite.com/products', {
    next: {
      revalidate: 300, // ISR: оновлювати кожні 5 хвилин
      tags: ['products'], // для on-demand revalidation
    },
  });
  return res.json();
}

// On-demand revalidation через webhook (CMS)
// app/api/revalidate/route.ts
export async function POST(request: Request) {
  const { secret, tag } = await request.json();

  if (secret !== process.env.REVALIDATION_SECRET) {
    return Response.json({ error: 'Unauthorized' }, { status: 401 });
  }

  revalidateTag(tag); // Інвалідує весь кеш з цим тегом
  return Response.json({ revalidated: true });
}

Varnish Cache: Серверний кеш перед origin

# /etc/varnish/default.vcl
vcl 4.0;

backend default {
  .host = "127.0.0.1";
  .port = "3000";
  .connect_timeout = 5s;
  .first_byte_timeout = 30s;
}

sub vcl_recv {
  # Не кешувати авторизовані запити
  if (req.http.Authorization || req.http.Cookie ~ "session=") {
    return (pass);
  }

  # Нормалізація URL
  set req.url = regsuball(req.url, "[?&](utm_source|utm_medium|utm_campaign|fbclid)=[^&]*", "");

  # Видаляємо ненульові файли cookie для кешованих сторінок
  if (req.url ~ "\.(css|js|png|jpg|webp|woff2)(\?.*)?$") {
    unset req.http.Cookie;
  }
}

sub vcl_backend_response {
  # Примусовий TTL для статики
  if (bereq.url ~ "\.(css|js|woff2)(\?.*)?$") {
    set beresp.ttl = 30d;
    set beresp.http.Cache-Control = "public, max-age=2592000";
  }

  # TTL для HTML
  if (beresp.http.Content-Type ~ "text/html") {
    set beresp.ttl = 5m;
  }
}

Моніторинг Cache Hit Rate

# Cloudflare Analytics API
curl "https://api.cloudflare.com/client/v4/zones/{zone_id}/analytics/dashboard" \
  -H "Authorization: Bearer {token}" \
  | jq '.result.totals.cached / .result.totals.requests * 100'

# Nginx: додаємо заголовок X-Cache-Status
add_header X-Cache-Status $upstream_cache_status;

# Перевірка через curl
curl -I https://mysite.com/api/products | grep -i x-cache
# X-Cache-Status: HIT
# X-Cache-Status: MISS
# X-Cache-Status: BYPASS

Цільові показники:

• Статичні ресурси: Cache Hit Rate > 99%
• HTML-сторінки: > 80%
• API-відповіді (публічні): > 70%

Налаштування кешування Cloudflare з Cache Rules та оптимальними заголовками — 1–2 робочих дні.