Vercel и Netlify

Vercel — это облачная платформа, созданная специально для развёртывания frontend- и full-stack JavaScript-приложений, предлагающая zero-configuration хостинг для фреймворков Next.js, Astro, React и Vite с автоматическим CI/CD, запускаемым при git-пуше. Подключение репозитория к Vercel включает preview-деплои для каждого pull request — каждый с уникальным HTTPS-URL, — позволяя командам проверять изменения в живой среде до мёрджа в продакшн. Edge Network Vercel глобально распределяет статические ресурсы, serverless-функции и код Edge Runtime, что отражается на улучшении Core Web Vitals (LCP и TTFB) без ручной CDN-настройки. CLI-инструмент vercel и файл конфигурации vercel.json позволяют разработчикам определять переменные окружения, правила переписывания, заголовки и регионы функций, делая Vercel комплексной платформой развёртывания для современных JavaScript-приложений.

Как это работает

Vercel и Netlify frontend'ов варьируется от статичного хостинга (Cloudflare Pages, Netlify, Vercel, GitHub Pages, S3 + CloudFront) до полного SSR-хостинга (Vercel, AWS Amplify, self-hosted Node + nginx). Build-артефакт: статичная dist/ (для SPA/SSG) или server-бандл (для SSR). CDN перед статикой — обязателен: кеши на edge-нодах дают почти ноль latency глобально. Atomic deploys (заливка новой версии + атомарное переключение) избегают half-state в середине деплоя.

Когда применять

Static-first хостинг (Cloudflare Pages, Netlify) — для SPA/SSG: дешевле и быстрее. Vercel или self-hosted node+nginx — когда нужен SSR. Для RF / суверенности — self-host на Yandex Cloud + Caddy/nginx; есть managed российские альтернативы (Selectel, VK Cloud). Preview deploys per PR — ревьюьте реальное собранное приложение, не только diff.

Типичные ошибки

Ловушки Vercel и Netlify: долго закешированный HTML указывает на версионированный JS, который удалили (белая страница после деплоя — TTL HTML-кеша = 0 или atomic deploys); API-ключи в клиентском JS ("они же публичные" — да, но rate-limit-атаки становятся лёгкими); нет SPA-fallback (deep links 404); забытый stale CDN-кеш. Тестируйте задеплоенный сайт, не только localhost.

Как это работает

Когда применять

Типичные ошибки

Связанные понятия

Полезные ресурсы