Vercel vs Netlify vs Cloudflare Pages в 2026: где деплоить фронтенд
Содержание
Современный фронтенд давно вышел за рамки простых 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 параллельных сборок.
Сравнительная таблица
| Параметр | Vercel | Netlify | Cloudflare Pages |
|---|---|---|---|
| Бесплатный трафик | 100 ГБ/мес | ~100 ГБ/мес (legacy) | Безлимитный |
| Коммерческое использование (free) | Нет | Да | Да |
| Edge-точки (PoP) | 119 | 70+ | 330+ |
| Серверные функции | Serverless + Edge Functions | Serverless + 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, Blob | Blobs | KV, R2, D1, Durable Objects |
| Конфигурация | vercel.json / vercel.ts | netlify.toml | wrangler.toml |
| Минимальная цена Pro | $20/пользователь | $25/пользователь | $5/месяц |
| Preview-деплои | Да | Да | Да |
| Встроенные формы | Нет | Да | Нет |
| A/B тестирование | Edge Middleware | Split Testing | Workers (ручное) |
Конфигурация и деплой: примеры
Одно из ключевых отличий платформ — способ конфигурации проекта. Рассмотрим типичные файлы конфигурации для 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, если:
- Ваш основной фреймворк — Next.js. Vercel — создатель Next.js, и ни одна другая платформа не обеспечивает такой же глубины интеграции: ISR, App Router, Server Components, Turbopack, кэширование — всё работает из коробки.
- Вам нужна предсказуемая производительность серверного рендеринга с минимальными холодными стартами (Fluid Compute).
- Вы готовы платить за профессиональные функции. Бесплатный тариф Vercel запрещает коммерческое использование.
- Важен AI-стек: Vercel AI SDK, v0 и AI Gateway интегрированы в платформу.
Выбирайте Netlify, если:
- Вам нужна максимальная простота развёртывания. Netlify — пионер «git push to deploy» с интуитивным интерфейсом.
- Вы работаете с разными фреймворками и не привязаны к Next.js. Netlify одинаково хорошо поддерживает Hugo, Eleventy, Astro, Nuxt и другие.
- Нужны встроенные формы, identity и CMS без подключения сторонних сервисов.
- Бесплатный тариф для коммерческих проектов — Netlify разрешает коммерческое использование на бесплатном плане.
- Важен A/B тестирование на уровне платформы (Split Testing).
Выбирайте Cloudflare Pages, если:
- Бюджет ограничен или отсутствует. Безлимитный бесплатный трафик и безлимитные запросы — Cloudflare Pages единственная платформа с такой щедрой бесплатной моделью.
- Вы строите fullstack-приложение на edge. Экосистема Workers + KV + D1 + R2 + Durable Objects позволяет создать полноценный бэкенд без традиционных облачных провайдеров.
- Глобальная производительность критична. 330+ PoP — крупнейшая edge-сеть, обеспечивающая стабильно низкий TTFB по всему миру.
- Вам нужна встроенная безопасность: WAF, DDoS-защита, SSL/TLS бесплатно.
- Проект не зависит от 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-хаб со встроенными сервисами.
Похожие статьи
- Astro vs Next.js vs Nuxt в 2026: какой фреймворк для фронтенда выбрать — сравнение фреймворков, которые чаще всего деплоят на Vercel, Netlify и Cloudflare Pages.
- GitHub Actions vs GitLab CI vs Jenkins в 2026 — обзор CI/CD-систем, с которыми интегрируются все три платформы деплоя.
- Docker vs Podman в 2026 — контейнеризация как альтернативный подход к деплою фронтенда и бэкенда.
Источники
- Vercel Pricing — официальная страница тарифов
- Vercel Edge Network — документация
- Netlify Pricing and Plans
- Netlify Credit-based pricing plans — документация
- Cloudflare Pages Limits — документация
- Cloudflare Workers & Pages Pricing
- Cloudflare Pages Wrangler Configuration — документация
- Vercel vs Netlify vs Cloudflare Pages: 2025 Comparison — Digital Applied
- Cloudflare vs Vercel vs Netlify: Edge Performance 2026 — DEV Community
- Vercel vs Netlify in 2026 — Clarifai