Разработка 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 === "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)
Типичные ошибки при разработке
| Ошибка | Последствие | Решение |
|---|---|---|
Использование 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 дня. Гарантируем качество и производительность.