Edge Functions на JavaScript: Vercel, Cloudflare и Netlify

Я уже несколько лет работаю с современными облачными технологиями. Сегодня я хочу поделиться с вами опытом использования Edge Functions, серверной логики, которая выполняется на граничных узлах (edge nodes). Мы разберем, как это работает на платформах Vercel, Cloudflare и Netlify, сравним их возможности и поможем выбрать лучшее решение для вашего проекта.

Что такое Edge Functions ?

Edge Functions это JavaScript-код, который выполняется не на центральном сервере, а на «границе» сети, ближе к пользователю. Это позволяет:

• Уменьшить задержку (latency) за счет географической близости.
• Снизить нагрузку на основной сервер.
• Персонализировать контент в реальном времени (A/B-тесты, локализация).

Раньше для этого использовались CDN для статики, но теперь можно запускать и динамическую логику.

Как работают Edge Functions на разных платформах

Рассмотрим три популярных инструмента: Vercel Edge Functions, Cloudflare Workers и Netlify Edge Functions.

1. Vercel Edge Functions

Vercel платформа для деплоя Next.js-приложений. Их Edge Functions интегрированы в экосистему Next.js и поддерживают стандарты Web API (как FetchEvent).

Пример кода:

export const config = { runtime: 'edge' }; 

export default function handler(request) {  
  const url = new URL(request.url);  
  const name = url.searchParams.get('name') || 'Мир';  
  return new Response(`Привет, ${name}!`);  
}

Инструкция:

• Создайте файл в /api/hello.js.
• Добавьте код выше.
• Задеплойте через vercel deploy.

Плюсы:

• Идеально для Next.js.
• Автоматическая оптимизация маршрутов.
• Локальное тестирование через vercel dev.

2. Cloudflare Workers

Cloudflare Workers самая зрелая платформа для edge-логики. Поддерживает WASM и имеет глобальную сеть из 300+ узлов.

Пример кода:

addEventListener('fetch', event => {  
  event.respondWith(handleRequest(event.request));  
});  

async function handleRequest(request) {  
  const { searchParams } = new URL(request.url);  
  const name = searchParams.get('name') || 'Мир';  
  return new Response(`Привет, ${name} от Cloudflare!`);  
}

Инструкция:

• Установите Wrangler: npm install -g wrangler.
• Создайте проект: wrangler init my-worker.
• Задеплойте: wrangler publish.

Плюсы:

• Максимальная производительность.
• Поддержка Durable Objects для состояния.
• Интеграция с Cloudflare CDN.

3. Netlify Edge Functions

Netlify специализируется на статических сайтах, но их Edge Functions позволяют добавлять динамику.

Пример кода:

export default async (request, context) => {  
  const url = new URL(request.url);  
  const name = url.searchParams.get('name') || 'Мир';  
  return new Response(`Привет, ${name} от Netlify!`);  
};

Инструкция:

• Создайте файл в netlify/edge-functions/hello.js.
• Добавьте конфиг в netlify.toml:
  toml

  [[edge_functions]]  
  path = "/hello"  
  function = "hello"

• Задеплойте через Git.

Плюсы:

• Простая интеграция с JAMstack.
• Поддержка Deno runtime.
• Бесплатный тариф для мелких проектов.

Сравнение Vercel, Cloudflare и Netlify

Рекомендации

1. Выбирайте Vercel, если:
   • Ваш проект на Next.js.
   • Нужна глубокая интеграция с фреймворком.
2. Выбирайте Cloudflare Workers, если:
   • Требуется минимальная задержка.
   • Нужны продвинутые фичи (WASM, CRON).
3. Выбирайте Netlify, если:
   • У вас статический сайт на JAMstack.
   • Хотите простоту настройки.

Совет: Для A/B-тестов используйте Edge Functions для подмены контента на лету. Пример:

// Cloudflare Worker  
if (request.cf.country === 'RU') {  
  response = new Response('Добро пожаловать!');  
}

Заключение

Edge Functions это мощный инструмент для современных веб-приложений. Каждая платформа имеет свои сильные стороны, Vercel для Next.js, Cloudflare для скорости, Netlify для статики. Экспериментируйте, тестируйте и выбирайте то, что подходит именно вам.

Удачи в разработке!