Розробка Edge Functions для сайту (Vercel Edge)
Хочете робити A/B-тести без лагів? Або редиректити користувачів за геолокацією за мілісекунди? Vercel Edge Functions запускаються на 100+ вузлах по всьому світу, холодний старт менше 1 мс. Ми розробили десятки таких функцій — від middleware до API-роутів. Розкажемо, як це працює і коли варто застосовувати.
Edge-обчислення стають стандартом для високонавантажених проєктів: вони знижують час відповіді до 10–50 мс і покращують Core Web Vitals. У цій статті — реальний досвід впровадження та готові приклади коду.
Проблеми, які вирішуємо
Персоналізація на SSG-сайті — проблема: кожен запит потребує нового рендеру. Edge Functions вирішують це на межі мережі без повної перегенерації. A/B-тести без втрати SEO — складно без серверного редиректу. Edge Functions дозволяють переписувати URL на льоту, зберігаючи статус-код 200. Геолокація для контенту — без Edge довелося б піднімати сервер або платити за CDN з підтримкою VCL. Ми використовуємо вбудовану geolocation з @vercel/functions. За нашими оцінками, міграція логіки на Edge скорочує витрати на хмарну інфраструктуру на 30–50%.
Коли вибирати 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.
| Сценарій | Edge Functions | Node.js Functions |
|---|---|---|
| A/B тест | ✅ | ❌ (надлишково) |
| Геолокація | ✅ | ❌ (дорого) |
| JWT-захист | ✅ | ✅ |
| Робота з файлами | ❌ | ✅ |
| PostgreSQL TCP | ❌ | ✅ |
| Виконання >30 с | ❌ (Hobby) | ✅ |
Як Edge Functions прискорюють сайт?
Швидкість досягається за рахунок розміщення коду на межі мережі. Замість запиту до сервера в одному регіоні, Edge виконується в найближчому до користувача вузлі. Це знижує затримку (latency) і покращує LCP та INP. Крім того, Edge може кешувати відповіді на рівні CDN, зменшуючи навантаження на origin. Для статично генерованих сайтів Edge Functions дозволяють персоналізувати контент без повної перегенерації — ключовий фактор покращення Core Web Vitals.Vercel Edge Functions documentation
Приклади реалізації
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"],
};
Наш досвід: на одному проєкті з аудиторією 2 млн унікальних на місяць Edge-мідлвар скоротив час до першого байта (TTFB) на 40% порівняно з аналогічною логікою на сервері в AWS. Користувачі в Європі отримували відповідь за <20 мс.
Геолокація та персоналізація
import { NextRequest, NextResponse } from "next/server";
import { geolocation } from "@vercel/functions";
export function middleware(request: NextRequest) {
const { country, city } = geolocation(request);
// Редирект на локалізовану версію
if (country === "UA" && !request.nextUrl.pathname.startsWith("/ua")) {
return NextResponse.redirect(
new URL(`/ua${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)
Типові помилки при розробці
| Помилка | Наслідок | Рішення |
|---|---|---|
Використання require замість import |
Помилка виконання | Завжди використовуйте ES-модулі |
Звернення до process.env поза верхнім рівнем |
Змінні оточення не завантажуються | Читайте env тільки під час ініціалізації |
Спроба прочитати файли через fs |
Помилка API | Використовуйте fetch або зовнішні API |
| Довгі операції >30 мс на Hobby | Тайм-аут | Перехід на Pro або оптимізація |
Що робити, якщо функція перевищує ліміти?
Оптимізуйте код: виносьте важкі обчислення на клієнт або використовуйте Vercel Pro. Для тривалих завдань застосовуйте звичайні Serverless Functions.Процес роботи та терміни
- Аналітика: розбираємо поточну архітектуру, визначаємо місця для Edge.
- Проектування: вибираємо сценарії (A/B, гео, auth), проектуємо middleware.
- Реалізація: пишемо код з TypeScript, тестуємо локально.
- Тестування: перевіряємо TTFB, LCP, INP, коректність редиректів.
- Деплой: налаштовуємо Vercel, викочуємо поступово (canary).
Терміни
Middleware з геолокацією та A/B тестом — 1–2 дні. Edge API Routes з кешуванням та JWT-захистом — 2–3 дні. Оцінимо ваш проєкт за 1 день.
Наш досвід: 5 років з Vercel, понад 50 проєктів з Edge Functions. Отримайте консультацію — обговоримо ваше завдання та запропонуємо оптимальне рішення. Замовте розробку Edge Functions — терміни від 1 дня. Гарантуємо якість та продуктивність.