Производительность на масштабе

Amazon посчитала: каждые 100ms задержки = -1% выручки. При миллиардных оборотах это сотни миллионов в год. Производительность веба - не про UX, это про деньги.

• **Cloudflare:** 300+ PoP, 2 триллиона запросов/день. stale-while-revalidate снижает load на origin на 95% при пиковом трафике. Cloudflare Workers - 0ms cold start vs Lambda 200ms+.
• **Vercel Edge + Next.js ISR:** Stripe документация - 99/100 Lighthouse. На-demand ISR через webhooks: Contentful публикует статью -> webhook -> revalidateTag('docs') -> следующий запрос получает свежий HTML.
• **Astro Islands:** Netlify документация переехала с Gatsby на Astro. JavaScript bundle сократился с 80KB до 14KB. Lighthouse Performance Score: 98/100. Time to Interactive: 1.2s -> 0.4s.

Cdn

CDN (Content Delivery Network) - сеть серверов по всему миру, кеширующих статику и ответы API ближе к пользователям. Cloudflare (300+ PoP), Fastly, AWS CloudFront, Akamai. Разница в латентности: запрос из Москвы до AWS us-east-1 - ~130ms, до ближайшего Cloudflare PoP - ~5ms. Netflix обслуживает 270+ миллионов подписчиков через собственный CDN Open Connect.

Cache-Control стратегии определяют эффективность CDN. `s-maxage` контролирует кеш на CDN независимо от браузера. `stale-while-revalidate` позволяет отдавать устаревший кеш пока обновляется в фоне - ключ к sub-millisecond ответам при высоком трафике.

Edge Computing

Edge Computing - выполнение кода прямо на CDN-узлах (PoP), а не на origin-серверах в датацентре. Cloudflare Workers, Vercel Edge Functions, Fastly Compute. Латентность: традиционный SSR в us-east-1 из Токио - 200ms+, Edge Function в Токийском PoP - 5-15ms. Подходит для: A/B тестов, аутентификации, personalization, geo-routing, request transformation.

Edge рантаймы имеют ограничения: нет прямого доступа к файловой системе, ограниченное подмножество Node.js API (нет `child_process`, `fs`, `net`), лимит CPU time (Cloudflare Workers: 50ms CPU per request, но 0ms cold start). Подключение к PostgreSQL с edge требует connection pooler (PlanetScale, Neon serverless driver, Hyperdrive).

Streaming Ssr

Streaming SSR (React 18+) - рендеринг HTML по частям с отправкой браузеру по мере готовности. Браузер начинает показывать и парсить верх страницы пока сервер рендерит медленные части. Time to First Byte (TTFB) снижается с 500ms до 50ms. `<Suspense>` граница на сервере: сначала отправляется статический shell, потом вставляются данные через `<script>` inlining.

React 18 Suspense + Server Components + Streaming - три взаимосвязанных концепции. Server Components выполняются на сервере (нет hydration), Streaming отправляет их HTML частями, Suspense задаёт граничные точки. Vercel показывает: Amazon.com с Streaming SSR снизил LCP на 17%.

Islands

Islands Architecture (Jason Miller, 2019) - страница состоит из статического HTML с изолированными 'островами' интерактивности. Каждый остров гидрируется независимо. Astro, Fresh (Deno), Marko реализуют этот паттерн. Результат: минимальный JavaScript - только для интерактивных островов. Документация Netlify на Astro: 98/100 Lighthouse Performance Score.

Partial Hydration - ключевая техника Islands: гидрировать только интерактивные компоненты, статические части остаются HTML. `client:idle`, `client:visible`, `client:media` в Astro - директивы когда гидрировать остров. `client:visible` - гидрация когда компонент попадает в viewport (Intersection Observer).

Ключевые идеи

• **CDN + Cache-Control:** `s-maxage` для CDN-кеша, `stale-while-revalidate` для sub-ms ответов при устаревшем кеше. On-demand revalidation через webhooks для консистентности. ISR в Next.js - реализация этого паттерна.
• **Edge Computing:** код на CDN-узлах (Cloudflare Workers, Vercel Edge). 0ms cold start, 5-15ms латентность глобально. Ограничения: нет FS API, connection limits к PostgreSQL - нужен Hyperdrive/Neon serverless driver.
• **Streaming SSR + Islands:** React 18 Suspense стримит HTML по частям - TTFB падает. Islands Architecture - минимальный JS только для интерактивных компонентов. `client:visible` = гидрация по Intersection Observer.

Связанные темы

Производительность на масштабе связана с архитектурой рендеринга и DevOps:

• WebAssembly — Wasm на edge (Cloudflare Workers WASI) позволяет выполнять compute-intensive задачи (обработка изображений, шифрование) без round-trip на origin
• Service Workers и PWA — Service Worker - клиентский edge: перехватывает запросы, кеширует ресурсы, отдаёт offline. Workbox + stale-while-revalidate = PWA с CDN-уровневым кешированием на клиенте
• Core Web Vitals — LCP (Largest Contentful Paint) напрямую зависит от CDN latency и Streaming SSR. CLS (Cumulative Layout Shift) требует reserved placeholder для ленивых островков

Вопросы для размышления

• Как выбрать между ISR с on-demand revalidation и полным SSR для страницы с часто обновляемыми данными (цены, остатки товаров)?
• При каких условиях Islands Architecture предпочтительнее Next.js App Router с Server Components?
• Как Streaming SSR влияет на SEO: видят ли поисковые роботы контент, отрендеренный через Suspense?

Связанные уроки

• db-23-sharding