Vercel: от Next.js до облачной империи
В 2016 году компания ZEIT (ныне Vercel) выпустила open-source фреймворк Next.js — расширение React с серверным рендерингом. Никто не предполагал, что через 10 лет Next.js станет самым популярным React-фреймворком, а Vercel — главной платформой для деплоя фронтенда. Сегодня через Vercel проходит трафик Walmart, TikTok, Hulu и тысяч стартапов, которые не хотят думать про DevOps.
Разбираем, как устроена платформа, которая сделала деплой тривиальным.
Официальный сайт: vercel.com
Как работает Vercel: архитектура под капотом
Традиционный деплой веб-приложения выглядит так: VM/Docker → Nginx → CI/CD → мониторинг. Vercel предлагает альтернативу — serverless-first платформу с тремя уровнями вычислений:
Serverless Functions. Код на Node.js, Python, Go или Ruby, который выполняется по HTTP-запросу. Vercel автоматически масштабирует функции, холодный старт — 50–200 мс (быстрее AWS Lambda в 2–3 раза благодаря оптимизированному рантайму).
Edge Functions. То же самое, но на границе сети. Код выполняется в ближайшем к пользователю дата-центре (Vercel использует сеть из 100+ точек). Задержка — миллисекунды. Идеально для A/B-тестов, гео-редиректов и аутентификации на уровне edge.
Edge Middleware. Код, который выполняется перед рендерингом страницы. Можно проверить куки, переписать URL, добавить заголовки — без единого изменения в приложении.
ISR (Incremental Static Regeneration). Гибрид между статикой и динамикой. Страницы генерируются статически, но перестраиваются по требованию (или по таймеру) без пересборки всего сайта. Next.js + Vercel работают с этим нативно.
DX (Developer Experience) — главный продукт Vercel
Vercel продаёт не хостинг. Она продаёт опыт разработчика:
- Git-интеграция. Закоммитили в main — Vercel собрал и задеплоил за 15 секунд. Preview Deployments создаются для каждой ветки и каждого Pull Request.
- Мгновенные откаты. Любой деплой остаётся доступным по URL. Вернуться на предыдущую версию — один клик.
- Аналитика. Web Vitals (LCP, CLS, INP) для реальных пользователей — не синтетика Lighthouse, а данные из браузеров посетителей.
- Vercel Toolbar. Панель для разработчиков и редакторов контента, которая показывает комментарии прямо поверх сайта в продакшене.
Тарифы: когда бесплатно кончается
- Hobby (Free): 100 GB bandwidth, 100 GB-hours serverless, 500K Edge Requests. Хватает на pet-проекты и портфолио.
- Pro ($20/мес/участник): 1 TB bandwidth, 1M Edge Requests, аналитика, защита от DDoS. Для стартапов с трафиком.
- Enterprise: Кастомные лимиты, SLA, выделенная поддержка, SSO.
Болевая точка: стоимость bandwidth после исчерпания лимита. На Pro тарифе за превышение берут $0.55/GB. Сайт с 100K посетителей в месяц на Next.js легко выйдет за лимит. Это главная причина, по которой растущие проекты уходят на кастомные серверы (Railway, Fly.io и даже VPS).
Партнёрская программа Vercel
Тип: RevShare Ставка: 20% от платежа привлечённого клиента в течение 24 месяцев Выплаты: Ежемесячно, через PartnerStack Cookie: 30 дней
Механика:
- Регистрация в партнёрской программе через PartnerStack
- Получение и размещение партнёрской ссылки
- Пользователь регистрируется и переходит на платный тариф
- 20% от его платежей в течение 2 лет — ваши
Расчёт экономики:
- 1 клиент на Pro ($20/мес) = $4/мес × 24 мес = $96 lifetime value
- 10 клиентов = $960 lifetime
- 100 клиентов = $9,600 lifetime
- 1 клиент Enterprise ($500+/мес) = $100+/мес
Плюсы:
- 24 месяца — одно из самых длинных окон в индустрии
- Премиальная аудитория: разработчики, которые готовы платить за инструменты
- Растущий рынок Next.js и Jamstack
Минусы:
- Аудитория специфическая (разработчики), нужно разбираться в теме
- Высокий порог входа в контент — нужны технические статьи/туториалы
- Порог выплаты через PartnerStack
Вердикт
Vercel сделала деплой таким же простым, как git push. Это главное достижение компании. Для разработчиков на Next.js это нативная среда, где всё работает «из коробки» без настройки. Для всех остальных — мощная, но дорогая платформа, которая окупается скоростью разработки, а не ценой хостинга.
Партнёрская программа с 24-месячным окном и 20% RevShare — сильное предложение для технических блогеров. Если вы пишете про React, Next.js и веб-разработку — Vercel должен быть в топе ваших партнёрских продуктов.
Оценка: 4.5 из 5 (как платформа), 4 из 5 (как партнёрский продукт) Для кого: Frontend-разработчики, Next.js-команды, стартапы, которым нужен быстрый итерационный цикл Не для кого: Проекты с большим трафиком и низким бюджетом — bandwidth-стоимость убьёт экономику