deployment-platforms · 15 мин чтения

Vercel vs Netlify vs Cloudflare Pages в 2026: где деплоить фронтенд

Vercel Netlify Cloudflare Pages деплой фронтенда JAMstack хостинг edge functions
Содержание

Современный фронтенд давно вышел за рамки простых HTML-страниц. Сегодня деплой веб-приложения включает CDN-раздачу, серверный рендеринг, edge-функции, preview-окружения и интеграцию с CI/CD-пайплайнами. Три платформы — Vercel, Netlify и Cloudflare Pages — доминируют в этом пространстве, но каждая решает задачу по-своему: Vercel делает ставку на первоклассную поддержку Next.js и edge-вычисления, Netlify строит универсальную JAMstack-платформу с удобным DX, а Cloudflare Pages предлагает безлимитный бесплатный хостинг, подкреплённый крупнейшей в мире edge-сетью.

Эта статья адресована фронтенд-разработчикам, DevOps-инженерам и техлидам, которые выбирают платформу для деплоя нового проекта или задумываются о миграции. Мы рассмотрим актуальные тарифы, производительность, конфигурацию, edge-функции, ограничения бесплатных тарифов и реальные сценарии — с примерами конфигов и выводами, основанными на бенчмарках 2025—2026 годов.

Краткий обзор участников

Vercel — движок для Next.js и не только

Vercel — платформа, созданная Гильермо Раухом (Guillermo Rauch), автором Socket.io и сооснователем фреймворка Next.js. Компания привлекла более 500 миллионов долларов инвестиций и обслуживает проекты таких компаний, как Washington Post, Under Armour и Notion.

Edge-сеть Vercel насчитывает 119 точек присутствия (PoP) в 94 городах 51 страны, а серверные функции выполняются в 18 вычислительных регионах. Vercel предоставляет нативную интеграцию с Next.js, но также поддерживает Astro, Nuxt, SvelteKit, Remix, Gatsby и десятки других фреймворков.

Ключевые нововведения 2025—2026: технология Fluid Compute для минимизации холодных стартов (99,37% запросов обрабатываются без холодного старта), Turbopack как бандлер по умолчанию для Next.js 16, встроенные DevTools с MCP-интеграцией, хранилища Vercel KV, Vercel Postgres и Vercel Blob, а также AI-ассистент v0 для генерации UI-компонентов.

Netlify — универсальный JAMstack-хаб

Netlify — одна из первых платформ, популяризировавших термин JAMstack. Основана Кристианом Бахом (Christian Bach) и Матиасом Билманном (Mathias Biilmann) в 2014 году. Платформа обслуживает более 4 миллионов разработчиков и свыше 8 миллионов сайтов.

CDN Netlify включает свыше 70 точек присутствия по всему миру. Платформа поддерживает практически любой статический генератор и фреймворк: Next.js, Astro, Nuxt, Hugo, Eleventy, Gatsby и другие.

С сентября 2025 года Netlify перешла на кредитную систему тарификации для новых аккаунтов, упростив модель оплаты. Среди ключевых возможностей: Netlify Edge Functions на базе Deno, Netlify Blobs для хранения данных, встроенные формы, identity-сервис, split-testing (A/B) и интеграция с Content Cloud.

Cloudflare Pages — бесплатный хостинг на крупнейшей edge-сети

Cloudflare Pages — платформа для деплоя статических и fullstack-сайтов, запущенная в 2020 году. Она работает поверх глобальной сети Cloudflare, насчитывающей более 330 точек присутствия в свыше 120 странах — это крупнейшая edge-инфраструктура среди трёх платформ.

Главное преимущество Cloudflare Pages — безлимитный бесплатный трафик и безлимитные запросы даже на бесплатном тарифе. Платформа тесно интегрирована с Cloudflare Workers (серверные edge-функции), KV (key-value хранилище), R2 (S3-совместимое объектное хранилище), D1 (SQL-база на SQLite), Durable Objects и другими сервисами экосистемы Cloudflare.

В 2025—2026 Cloudflare унифицировала конфигурацию Pages и Workers через единый файл wrangler.toml, добавила поддержку монорепозиториев и расширила интеграцию с Next.js через адаптер @cloudflare/next-on-pages.

Тарифы и ценообразование

Ценовая политика — один из ключевых факторов при выборе платформы, особенно для стартапов и личных проектов. Рассмотрим актуальные тарифы на февраль 2026 года.

Vercel

  • Hobby (бесплатно): 100 ГБ трафика/месяц, базовые серверные функции, автоматический CI/CD из Git. Ограничение: только для личных, некоммерческих проектов. Нельзя использовать для бизнеса.
  • Pro ($20/пользователь/месяц): 1 ТБ трафика, ~1000 ГБ-часов серверных функций, расширенная аналитика, командная работа. Превышение трафика: $0,15/ГБ.
  • Enterprise (от ~$3500/месяц): SLA, расширенная безопасность, выделенная поддержка, compliance-функции.

Netlify

Для новых аккаунтов (с сентября 2025) действует кредитная модель:

  • Free (бесплатно): базовый набор кредитов, покрывающий небольшие проекты. Можно использовать для коммерческих проектов — важное отличие от Vercel.
  • Personal ($15/месяц): увеличенный набор кредитов, приоритетная поддержка.
  • Pro ($25/пользователь/месяц): расширенные кредиты, командная работа, advanced analytics.

Для legacy-аккаунтов (до сентября 2025): бесплатный тариф включает 100 ГБ трафика, 300 минут сборки, 125 000 вызовов функций и 1 миллион вызовов edge-функций в месяц.

Cloudflare Pages

  • Free (бесплатно): безлимитный трафик, безлимитные запросы, 500 сборок/месяц, 1 параллельная сборка, 100 пользовательских доменов на проект. Workers: 100 000 запросов/день.
  • Pro ($5/месяц): 5 000 сборок/месяц, 5 параллельных сборок. Workers: 10 миллионов запросов/месяц.
  • Business ($20/месяц): 20 000 сборок/месяц, 20 параллельных сборок.

Сравнительная таблица

ПараметрVercelNetlifyCloudflare Pages
Бесплатный трафик100 ГБ/мес~100 ГБ/мес (legacy)Безлимитный
Коммерческое использование (free)НетДаДа
Edge-точки (PoP)11970+330+
Серверные функцииServerless + Edge FunctionsServerless + Edge Functions (Deno)Workers (V8 isolates)
Средний TTFB (статика)~22—60 мс~90—350 мс~31—53 мс
Холодный старт функций~50—200 мс (Fluid Compute)~100—500 мс< 5 мс (V8 isolates)
Нативный фреймворкNext.jsНет (все поддерживаются)Нет (все поддерживаются)
Встроенное хранилищеKV, Postgres, BlobBlobsKV, R2, D1, Durable Objects
Конфигурацияvercel.json / vercel.tsnetlify.tomlwrangler.toml
Минимальная цена Pro$20/пользователь$25/пользователь$5/месяц
Preview-деплоиДаДаДа
Встроенные формыНетДаНет
A/B тестированиеEdge MiddlewareSplit TestingWorkers (ручное)

Конфигурация и деплой: примеры

Одно из ключевых отличий платформ — способ конфигурации проекта. Рассмотрим типичные файлы конфигурации для React/Next.js-приложения.

Vercel: vercel.json

Vercel стремится к zero-config подходу: для Next.js-проектов обычно не нужен конфигурационный файл вовсе. Однако для тонкой настройки используется vercel.json:

{
  "$schema": "https://openapi.vercel.sh/vercel.json",
  "framework": "nextjs",
  "regions": ["iad1", "fra1"],
  "headers": [
    {
      "source": "/api/(.*)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "s-maxage=60, stale-while-revalidate=300"
        }
      ]
    }
  ],
  "functions": {
    "app/api/heavy-task/route.ts": {
      "memory": 3009,
      "maxDuration": 60
    }
  },
  "redirects": [
    {
      "source": "/old-page",
      "destination": "/new-page",
      "permanent": true
    }
  ]
}

Деплой выполняется одной командой после подключения Git-репозитория:

# Установка CLI
npm i -g vercel

# Деплой (первый раз -- интерактивная настройка)
vercel

# Продакшн-деплой
vercel --prod

Netlify: netlify.toml

Netlify использует файл netlify.toml в корне репозитория. Его синтаксис TOML позволяет описывать build-команды, редиректы, заголовки и контекстные переопределения:

[build]
  command = "npm run build"
  publish = "dist"
  functions = "netlify/functions"

[build.environment]
  NODE_VERSION = "22"

# Настройки для preview-деплоев
[context.deploy-preview]
  command = "npm run build:preview"

# Редиректы
[[redirects]]
  from = "/api/*"
  to = "/.netlify/functions/:splat"
  status = 200

[[redirects]]
  from = "/old-page"
  to = "/new-page"
  status = 301

# Заголовки
[[headers]]
  for = "/assets/*"
  [headers.values]
    Cache-Control = "public, max-age=31536000, immutable"

# Edge Functions
[[edge_functions]]
  path = "/geolocation"
  function = "geo"

Деплой:

# Установка CLI
npm i -g netlify-cli

# Привязка к сайту
netlify link

# Локальный dev-сервер с эмуляцией функций
netlify dev

# Продакшн-деплой
netlify deploy --prod

Cloudflare Pages: wrangler.toml

Cloudflare Pages использует wrangler.toml — тот же формат, что и Cloudflare Workers. С 2025 года это основной способ конфигурации:

name = "my-frontend-app"
compatibility_date = "2026-02-01"
pages_build_output_dir = "./dist"

# Привязка KV-хранилища
[[kv_namespaces]]
  binding = "CACHE"
  id = "abc123def456"

# Привязка D1-базы данных
[[d1_databases]]
  binding = "DB"
  database_name = "my-app-db"
  database_id = "xxxx-yyyy-zzzz"

# Привязка R2-бакета
[[r2_buckets]]
  binding = "ASSETS"
  bucket_name = "my-assets"

# Переменные окружения
[vars]
  API_URL = "https://api.example.com"

Деплой:

# Установка CLI
npm i -g wrangler

# Авторизация
wrangler login

# Локальный dev-сервер
wrangler pages dev ./dist

# Деплой через прямую загрузку
wrangler pages deploy ./dist

# Или через Git-интеграцию (настраивается в dashboard)

Edge-функции и серверные вычисления

Edge-функции — критически важная возможность для современных веб-приложений: авторизация, персонализация, A/B тестирование, геолокация и серверный рендеринг ближе к пользователю.

Vercel Edge Functions

Vercel предлагает два типа серверных функций: Serverless Functions (Node.js, работают в вычислительных регионах) и Edge Functions (облегчённый runtime на базе V8, работают на всех 119 PoP).

// app/api/geo/route.ts (Next.js App Router)
import { NextRequest, NextResponse } from 'next/server';

export const runtime = 'edge'; // Работает на edge

export async function GET(request: NextRequest) {
  const country = request.geo?.country || 'Unknown';
  const city = request.geo?.city || 'Unknown';

  return NextResponse.json({
    message: `Hello from ${city}, ${country}!`,
    timestamp: new Date().toISOString(),
  });
}

В 2025 году Vercel представила Fluid Compute — технологию, которая переиспользует серверные функции между запросами, минимизируя холодные старты. По данным Vercel, 99,37% запросов обрабатываются без холодного старта.

Netlify Edge Functions

Netlify Edge Functions работают на runtime Deno и полностью поддерживают Web API:

// netlify/edge-functions/geo.ts
import type { Context } from "@netlify/edge-functions";

export default async function handler(
  request: Request,
  context: Context
) {
  const { country, city, latitude, longitude } = context.geo;

  // Персонализация контента по геолокации
  if (country?.code === "RU") {
    return new Response(
      JSON.stringify({
        greeting: "Привет!",
        city: city,
        coordinates: { latitude, longitude },
      }),
      {
        headers: { "Content-Type": "application/json" },
      }
    );
  }

  return new Response(
    JSON.stringify({ greeting: "Hello!", city }),
    { headers: { "Content-Type": "application/json" } }
  );
}

export const config = { path: "/api/geo" };

Cloudflare Workers (Pages Functions)

Cloudflare Workers используют V8 isolates — тот же движок, что и в Chrome, но без накладных расходов на запуск полноценного Node.js-процесса. Это обеспечивает холодный старт менее 5 мс — лучший показатель среди трёх платформ:

// functions/api/geo.ts (Pages Functions)
interface Env {
  CACHE: KVNamespace;
  DB: D1Database;
}

export const onRequest: PagesFunction<Env> = async (context) => {
  const { request, env } = context;
  const country = request.cf?.country || "Unknown";
  const city = request.cf?.city || "Unknown";

  // Кэширование в KV
  const cacheKey = `geo:${country}:${city}`;
  const cached = await env.CACHE.get(cacheKey);
  if (cached) {
    return new Response(cached, {
      headers: { "Content-Type": "application/json" },
    });
  }

  // Запрос к D1
  const stats = await env.DB
    .prepare("SELECT visits FROM geo_stats WHERE country = ?")
    .bind(country)
    .first();

  const response = JSON.stringify({
    country,
    city,
    visits: stats?.visits || 0,
  });

  // Кэшируем на 5 минут
  await env.CACHE.put(cacheKey, response, { expirationTtl: 300 });

  return new Response(response, {
    headers: { "Content-Type": "application/json" },
  });
};

Ключевое преимущество Cloudflare — интеграция Workers с KV, D1, R2 и Durable Objects прямо в edge-функциях. Это позволяет строить полноценные fullstack-приложения без дополнительных облачных провайдеров.

Производительность: бенчмарки 2025—2026

Производительность платформы складывается из нескольких факторов: Time to First Byte (TTFB), скорость сборки, холодные старты функций и стабильность по регионам.

TTFB для статического контента

По данным бенчмарков 2025—2026 годов:

  • Vercel: 22—60 мс (edge), средний глобальный TTFB около 234 мс с учётом серверного рендеринга.
  • Cloudflare Pages: 31—53 мс (edge), один из лучших показателей благодаря крупнейшей сети PoP.
  • Netlify: 90—350 мс, со значительным разбросом по регионам. Бенчмарки показали 7 мс в US-East, но до 2406 мс в EU-Central (Германия) — разница в 340 раз.

Холодные старты серверных функций

  • Cloudflare Workers: < 5 мс — абсолютный лидер благодаря V8 isolates.
  • Vercel Serverless: 50—200 мс с Fluid Compute; Edge Functions быстрее.
  • Netlify Functions: 100—500 мс для серверных функций; Edge Functions на Deno — быстрее.

Скорость сборки

Для типичного Next.js-приложения средней сложности:

  • Vercel: 1—2 минуты благодаря кэшированию и Turbopack.
  • Netlify: 2—3 минуты.
  • Cloudflare Pages: 1—3 минуты, зависит от конфигурации.

Региональная стабильность

Cloudflare демонстрирует наиболее стабильную производительность по регионам благодаря 330+ PoP. Vercel показывает хорошую стабильность с 119 PoP. Netlify имеет наибольший разброс — 70+ PoP и менее предсказуемую задержку в некоторых регионах.

Экосистема и интеграции

Vercel

  • Хранилища: Vercel KV (Redis), Vercel Postgres (Neon), Vercel Blob (объектное хранилище).
  • AI: AI SDK, AI Gateway, v0 для генерации UI.
  • Мониторинг: встроенные Web Analytics, Speed Insights, Log Drains.
  • Интеграции: GitHub, GitLab, Bitbucket, Slack, Datadog, Sentry.
  • DX: Next.js DevTools с MCP-интеграцией, Turbopack, ISR.

Netlify

  • Хранилища: Netlify Blobs, интеграция с внешними БД.
  • Формы: встроенная обработка форм без серверного кода.
  • Identity: встроенная аутентификация и управление пользователями.
  • Content Cloud: headless CMS с визуальным редактором.
  • Мониторинг: Netlify Analytics (серверная аналитика, без клиентского JS).
  • Split Testing: A/B тестирование на уровне CDN.

Cloudflare Pages

  • Хранилища: Workers KV, R2 (S3-совместимое), D1 (SQLite), Durable Objects, Hyperdrive (прокси для внешних БД).
  • AI: Workers AI (inference на edge), AI Gateway, Vectorize (векторная БД).
  • Безопасность: WAF, DDoS-защита, SSL/TLS — входят в бесплатный тариф.
  • DNS: Cloudflare DNS — один из самых быстрых резолверов в мире.
  • Email: Email Workers для обработки входящей почты.
  • Очереди: Cloudflare Queues для асинхронной обработки.

Когда какую платформу выбрать

Выбирайте Vercel, если:

  1. Ваш основной фреймворк — Next.js. Vercel — создатель Next.js, и ни одна другая платформа не обеспечивает такой же глубины интеграции: ISR, App Router, Server Components, Turbopack, кэширование — всё работает из коробки.
  2. Вам нужна предсказуемая производительность серверного рендеринга с минимальными холодными стартами (Fluid Compute).
  3. Вы готовы платить за профессиональные функции. Бесплатный тариф Vercel запрещает коммерческое использование.
  4. Важен AI-стек: Vercel AI SDK, v0 и AI Gateway интегрированы в платформу.

Выбирайте Netlify, если:

  1. Вам нужна максимальная простота развёртывания. Netlify — пионер «git push to deploy» с интуитивным интерфейсом.
  2. Вы работаете с разными фреймворками и не привязаны к Next.js. Netlify одинаково хорошо поддерживает Hugo, Eleventy, Astro, Nuxt и другие.
  3. Нужны встроенные формы, identity и CMS без подключения сторонних сервисов.
  4. Бесплатный тариф для коммерческих проектов — Netlify разрешает коммерческое использование на бесплатном плане.
  5. Важен A/B тестирование на уровне платформы (Split Testing).

Выбирайте Cloudflare Pages, если:

  1. Бюджет ограничен или отсутствует. Безлимитный бесплатный трафик и безлимитные запросы — Cloudflare Pages единственная платформа с такой щедрой бесплатной моделью.
  2. Вы строите fullstack-приложение на edge. Экосистема Workers + KV + D1 + R2 + Durable Objects позволяет создать полноценный бэкенд без традиционных облачных провайдеров.
  3. Глобальная производительность критична. 330+ PoP — крупнейшая edge-сеть, обеспечивающая стабильно низкий TTFB по всему миру.
  4. Вам нужна встроенная безопасность: WAF, DDoS-защита, SSL/TLS бесплатно.
  5. Проект не зависит от Node.js runtime. Workers используют V8 isolates, а не Node.js, поэтому не все npm-пакеты совместимы.

Ограничения и подводные камни

Ни одна платформа не идеальна. Вот ключевые ограничения, о которых стоит знать:

Vercel:

  • Бесплатный тариф нельзя использовать для коммерческих проектов — это жёсткое ограничение Terms of Service.
  • Vendor lock-in: некоторые функции (ISR, Middleware) глубоко интегрированы с инфраструктурой Vercel.
  • Pro-тариф может стать дорогим при росте трафика: $0,15/ГБ сверх 1 ТБ.

Netlify:

  • Нестабильная производительность в некоторых регионах (особенно в Европе и Азии).
  • Кредитная модель (для новых аккаунтов) может быть менее предсказуемой, чем фиксированные лимиты.
  • Edge Functions работают на Deno — не все Node.js-библиотеки совместимы.

Cloudflare Pages:

  • Workers runtime — не полноценный Node.js. Многие npm-пакеты, зависящие от Node.js API (fs, net, child_process), не работают.
  • Лимит 500 сборок/месяц на бесплатном тарифе может быть недостаточен для активной разработки.
  • Одна параллельная сборка на бесплатном тарифе — при частых пушах возникнет очередь.
  • Конфигурация через wrangler.toml становится «источником истины» — нельзя редактировать те же параметры в dashboard.

Миграция между платформами

Переход между Vercel, Netlify и Cloudflare Pages относительно прост для статических сайтов — достаточно сменить команду сборки и директорию вывода. Для проектов с серверными функциями миграция сложнее:

# Пример структуры проекта, совместимой с тремя платформами
my-app/
  src/                  # Исходный код приложения
  public/               # Статические ассеты
  dist/                 # Директория сборки
  vercel.json           # Конфигурация Vercel
  netlify.toml          # Конфигурация Netlify
  wrangler.toml         # Конфигурация Cloudflare Pages
  package.json

Совет: используйте фреймворки с мультиплатформенными адаптерами. Astro, Nuxt (с Nitro) и SvelteKit позволяют деплоить на все три платформы с минимальными изменениями конфигурации:

# Astro: смена адаптера для другой платформы
npm install @astrojs/vercel    # для Vercel
npm install @astrojs/netlify   # для Netlify
npm install @astrojs/cloudflare # для Cloudflare Pages
// astro.config.mjs -- пример для Cloudflare
import { defineConfig } from 'astro/config';
import cloudflare from '@astrojs/cloudflare';

export default defineConfig({
  output: 'server',
  adapter: cloudflare({
    imageService: 'passthrough',
  }),
});

Заключение

Vercel, Netlify и Cloudflare Pages в 2026 году — это три зрелые платформы, каждая из которых нашла свою нишу.

Vercel остаётся лучшим выбором для Next.js-проектов и команд, которые ценят первоклассный DX, предсказуемую производительность и готовы инвестировать в Pro-тариф. Fluid Compute и Turbopack делают платформу особенно привлекательной для серверного рендеринга.

Netlify — оптимальный выбор для команд, работающих с разными фреймворками, ценящих простоту и нуждающихся в встроенных инструментах (формы, identity, CMS). Бесплатный тариф для коммерческих проектов — сильный аргумент для стартапов.

Cloudflare Pages — безусловный лидер по соотношению цена/возможности. Безлимитный бесплатный трафик, крупнейшая edge-сеть, молниеносные холодные старты Workers и богатая экосистема хранилищ делают платформу идеальной для бюджетных проектов и edge-first приложений.

Для большинства фронтенд-проектов в 2026 году рекомендация такова: начните с Cloudflare Pages, если бюджет ограничен; выберите Vercel, если ваш стек построен на Next.js; рассмотрите Netlify, если вам нужен универсальный JAMstack-хаб со встроенными сервисами.

Похожие статьи

Источники

  1. Vercel Pricing — официальная страница тарифов
  2. Vercel Edge Network — документация
  3. Netlify Pricing and Plans
  4. Netlify Credit-based pricing plans — документация
  5. Cloudflare Pages Limits — документация
  6. Cloudflare Workers & Pages Pricing
  7. Cloudflare Pages Wrangler Configuration — документация
  8. Vercel vs Netlify vs Cloudflare Pages: 2025 Comparison — Digital Applied
  9. Cloudflare vs Vercel vs Netlify: Edge Performance 2026 — DEV Community
  10. Vercel vs Netlify in 2026 — Clarifai
← Все статьи