CDN и edge-функции
Тема дорожной карты · Frontend разработчик
Content Delivery Network (CDN) — это глобально распределённая сеть граничных серверов, которая кэширует и отдаёт статические frontend-ресурсы (JavaScript-бандлы, CSS-файлы, HTML5-страницы, изображения и шрифты) из точек, географически близких к конечным пользователям, что кардинально снижает задержку. Frontend-конвейеры развёртывания обычно отправляют результат сборки (папку dist/ из Vite или Webpack) на источник CDN, настраивают заголовки Cache-Control вроде immutable, max-age=31536000 для файлов с хэшами в имени и настраивают CNAME или A DNS-записи, указывающие домен на граничную сеть CDN-провайдера. Популярные CDN-провайдеры — Cloudflare, AWS CloudFront, Fastly и Bunny.net — каждый предлагает TLS-терминацию, поддержку HTTP/2 и HTTP/3, сжатие gzip/Brotli и защиту от DDoS. Раздача ресурсов через CDN напрямую улучшает Core Web Vitals — особенно Largest Contentful Paint (LCP) — за счёт сокращения времени до первого байта для критических ресурсов, таких как основной JavaScript-бандл и главные изображения.
Как это работает
CDN и edge-функции 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.
Типичные ошибки
Ловушки CDN и edge-функции: долго закешированный HTML указывает на версионированный JS, который удалили (белая страница после деплоя — TTL HTML-кеша = 0 или atomic deploys); API-ключи в клиентском JS ("они же публичные" — да, но rate-limit-атаки становятся лёгкими); нет SPA-fallback (deep links 404); забытый stale CDN-кеш. Тестируйте задеплоенный сайт, не только localhost.