Розробка Edge Functions для сайту (Vercel Edge)

Розробка Edge Functions для сайту (Vercel Edge)

Vercel Edge Functions виконуються на Vercel Edge Network — на 100+ вузлах по всьому світу, в мілісекундах від користувача. Холодний старт менше 1 мс. Це відрізняє їх від звичайних Vercel Functions, які працюють в одному регіоні AWS.

Коли Edge, коли звичайні Functions

Edge Functions оптимальні для: персоналізації (A/B тест, геолокація), редиректів та rewrite на основі умов, middleware-аутентифікації, трансформації заголовків та відповідей, кеш-валідації за cookie.

Звичайні Node.js Functions потрібні коли: потрібен Node.js API (fs, crypto, нативні модулі), з'єднання з PostgreSQL через TCP, час виконання > 30 с, пам'ять > 128 MB.

Edge Runtime використовує Web API (як у браузері), а не Node.js API.

Middleware для A/B тестування

Файл middleware.ts у корені проекту Next.js:

import { NextRequest, NextResponse } from "next/server";

export function middleware(request: NextRequest) {
  const url = request.nextUrl.clone();

  // A/B тест для головної сторінки
  if (url.pathname === "/") {
    const bucket = request.cookies.get("ab-bucket")?.value;

    if (!bucket) {
      const newBucket = Math.random() < 0.5 ? "a" : "b";
      const response = NextResponse.rewrite(
        new URL(newBucket === "b" ? "/home-variant" : "/", request.url)
      );
      response.cookies.set("ab-bucket", newBucket, { maxAge: 86400 * 30 });
      return response;
    }

    if (bucket === "b") {
      url.pathname = "/home-variant";
      return NextResponse.rewrite(url);
    }
  }

  return NextResponse.next();
}

export const config = {
  matcher: ["/", "/pricing", "/features"],
};

Геолокація та персоналізація

import { NextRequest, NextResponse } from "next/server";
import { geolocation } from "@vercel/functions";

export function middleware(request: NextRequest) {
  const { country, city } = geolocation(request);

  // Редирект на локалізовану версію
  if (country === "RU" && !request.nextUrl.pathname.startsWith("/ru")) {
    return NextResponse.redirect(
      new URL(`/ru${request.nextUrl.pathname}`, request.url)
    );
  }

  // Додаємо геодані в заголовки для компонентів
  const response = NextResponse.next();
  response.headers.set("x-user-country", country || "unknown");
  response.headers.set("x-user-city", city || "unknown");
  return response;
}

Edge API Route

// app/api/edge-data/route.ts
import { NextRequest, NextResponse } from "next/server";

export const runtime = "edge";

export async function GET(request: NextRequest) {
  const { searchParams } = new URL(request.url);
  const id = searchParams.get("id");

  // Fetch працює нативно в Edge Runtime
  const data = await fetch(`https://api.external.com/data/${id}`, {
    headers: { Authorization: `Bearer ${process.env.API_KEY}` },
    // next.js cache: кеш на 60 секунд
    next: { revalidate: 60 },
  }).then(r => r.json());

  return NextResponse.json(data, {
    headers: { "Cache-Control": "s-maxage=60, stale-while-revalidate=120" }
  });
}

Захист маршрутів через JWT

import { NextRequest, NextResponse } from "next/server";
import { jwtVerify } from "jose";

const JWT_SECRET = new TextEncoder().encode(process.env.JWT_SECRET);

export async function middleware(request: NextRequest) {
  if (request.nextUrl.pathname.startsWith("/dashboard")) {
    const token = request.cookies.get("auth-token")?.value;

    if (!token) {
      return NextResponse.redirect(new URL("/login", request.url));
    }

    try {
      await jwtVerify(token, JWT_SECRET);
      return NextResponse.next();
    } catch {
      const response = NextResponse.redirect(new URL("/login", request.url));
      response.cookies.delete("auth-token");
      return response;
    }
  }
}

jose — єдина JWT-бібліотека, сумісна з Edge Runtime (використовує Web Crypto API замість node:crypto).

Обмеження Edge Runtime

• Немає node:fs, node:path, node:crypto (доступний Web Crypto)
• Немає нативних npm-пакетів
• Пам'ять: 128 MB
• CPU time: 30 мс (Hobby), без обмежень на Pro
• Немає прямих з'єднань до PostgreSQL (Neon та PlanetScale підтримують HTTP API)

Терміни

Middleware з геолокацією та A/B тестом — 1–2 дні. Edge API Routes з кешуванням та JWT-захистом — 2–3 дні.