Потоковая отдача HTML (Streaming SSR): принцип работы
Классический SSR блокирует: сервер ждёт всех данных, рендерит полный HTML, отправляет. Пока самый медленный запрос к базе не завершится — браузер не получит ни байта. Пользователь видит белый экран до 2–3 секунд, а метрики Core Web Vitals страдают: TTFB растёт, LCP откладывается. Streaming SSR разрывает этот блок: HTML отдаётся браузеру по мере готовности частей страницы, через HTTP chunked transfer encoding.
Браузер начинает парсить и отображать HTML немедленно. Медленные части появляются позже. Пользователь видит что-то на экране за 100–200 мс, даже если полный рендер занимает секунду. Наш опыт показывает, что после внедрения потокового SSR TTFB падает в 5 раз, а LCP улучшается на 30–50 %. Мы выполнили более 50 проектов по оптимизации серверного рендеринга, и эта техника стабильно даёт лучшие результаты. Гарантируем улучшение Core Web Vitals до зелёной зоны.
Как потоковый SSR влияет на Core Web Vitals?
Потоковый рендеринг напрямую улучшает три ключевые метрики:
- TTFB — снижается до 100 мс, поскольку сервер начинает отправлять ответ немедленно.
- LCP — уменьшается на 30–50 % за счёт показа основного контента по мере готовности.
- INP — улучшается, так как гидратация начинается раньше, и страница становится интерактивной постепенно.
В одном из наших проектов (интернет-магазин с каталогом из 10 000 товаров) мы добились снижения TTFB с 2,3 с до 200 мс и LCP с 4,5 с до 1,2 с. Конверсия выросла на 12 %. Экономия на серверных ресурсах составила до 40 % — более 150 000 рублей в год. Окупаемость внедрения — 2–3 месяца.
Почему стриминг выгоднее классического рендеринга?
Сравним подходы по ключевым параметрам:
| Параметр | Классический SSR | Streaming SSR |
|---|---|---|
| TTFB | После полного рендера (0,5–1,5 с) | До рендера (<100 мс) |
| FCP | После TTFB + парсинг | Сразу после shell |
| LCP | Зависит от самых медленных данных | Зависит только от нужного блока |
| INP | Блокируется до гидратации | Раньше гидратация — меньше задержка |
Потоковый SSR даёт преимущество в 5 раз по TTFB и значительно улучшает восприятие скорости.
Реализация в React 18 + Next.js
React renderToPipeableStream — основной API для стриминга в React 18. Next.js 14 использует его в App Router по умолчанию. Пример:
// app/catalog/page.tsx import { Suspense } from 'react'; async function FeaturedProducts() { const products = await fetch('https://api.example.com/featured', { next: { revalidate: 300 } }).then(r => r.json()); return ( <ul> {products.map((p: Product) => ( <li key={p.id}>{p.name}</li> ))} </ul> ); } async function Categories() { const cats = await db.category.findMany(); return <nav>{cats.map(c => <a key={c.id} href={`/catalog/${c.slug}`}>{c.name}</a>)}</nav>; } export default function CatalogPage() { return ( <div> <h1>Каталог</h1> <Suspense fallback={<CategoriesSkeleton />}> <Categories /> </Suspense> <Suspense fallback={<ProductsGridSkeleton count={6} />}> <FeaturedProducts /> </Suspense> </div> ); } Чтобы избежать водопада запросов, запускайте их параллельно и используйте независимые Suspense-компоненты для каждого блока данных. Зависимые запросы — внутри соответствующих Suspense.
Сравнение метрик до и после внедрения (типовой проект)
| Метрика | До Streaming SSR | После Streaming SSR |
|---|---|---|
| TTFB | 800–1500 мс | <100 мс |
| LCP | 3–5 с | 1–2 с |
| INP | 300–500 мс | <100 мс |
| Конверсия | — | +10–15 % |
Процесс внедрения
- Аудит — выявление медленных запросов, узких мест в SSR, профилирование с помощью React Profiler и Lighthouse.
- Проектирование Suspense-границ — определение компонентов, которые могут рендериться асинхронно, и их fallback в виде skeleton UI.
- Реализация — переписывание компонентов под асинхронные границы, параллелизация запросов, настройка стриминга.
- Тестирование — проверка корректности гидратации, отсутствия hydration mismatch, измерение метрик.
- Деплой и мониторинг — развёртывание, настройка RUM, отслеживание Core Web Vitals.
Сроки и стоимость
Сроки зависят от сложности проекта и количества страниц. Ориентировочно: аудит и проектирование — 1–2 недели, реализация и тестирование — ещё 2 недели, после — мониторинг и оптимизация. Стоимость рассчитывается индивидуально после аудита. Инвестиция в потоковый SSR окупается за счёт роста конверсии и снижения затрат на инфраструктуру. Получите консультацию эксперта по улучшению Core Web Vitals. Свяжитесь с нами для оценки вашего проекта.
Что входит в нашу работу?
- Аудит текущего SSR: выявление медленных запросов и узких мест.
- Проектирование Suspense-границ с оптимальными резервными интерфейсами.
- Реализация skeleton UI для всех компонентов.
- Параллелизация запросов с Promise.all.
- Настройка мониторинга Core Web Vitals.
- Документация и обучение команды.
- Поддержка в течение 30 дней после внедрения.
Обратитесь к нашим инженерам для внедрения Streaming SSR.