Потокова віддача 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.