App

Обычный SSR: сервер рендерит ВСЮ страницу в строку, потом отправляет. Streaming SSR: сервер начинает отправлять HTML, как только первые компоненты отрендерены. ```javascript // Обычный SSR — ждём полный рендер import { renderToString } from 'vue/server-renderer' app.get('*', async (req, res) => { const { app: vueApp } = createApp() const html = await renderToString(vueApp) // блокирующий res.send(wrapInHtml(html)) }) ``` ```javascript // Streaming SSR с Node.js streams import { renderToNodeStream } from 'vue/server-renderer' app.get('*', async (req, res) => { const { app: vueApp, router } = createApp() await router.push(req.url) await router.isReady() res.setHeader('Content-Type', 'text/html') // Отправляем начало HTML сразу res.write(` App

`) // Стримим Vue-рендер const stream = renderToNodeStream(vueApp) stream.pipe(res, { end: false }) stream.on('end', () => { // Завершаем HTML после стрима res.end(`

`) }) }) ``` ```javascript // Streaming SSR с Web Streams API (универсальный, работает в edge-рантаймах) import { renderToWebStream } from 'vue/server-renderer' async function handler(request) { const { app: vueApp, router } = createApp() await router.push(new URL(request.url).pathname) await router.isReady() const stream = renderToWebStream(vueApp) // Для добавления обёртки HTML используем TransformStream const { readable, writable } = new TransformStream() const writer = writable.getWriter() const encoder = new TextEncoder() ;(async () => { await writer.write(encoder.encode( '

' )) const reader = stream.getReader() while (true) { const { done, value } = await reader.read() if (done) break await writer.write(value) } await writer.write(encoder.encode( '

' )) await writer.close() })() return new Response(readable, { headers: { 'Content-Type': 'text/html' } }) } ``` Что стримится и когда: ```vue ``` Vue стримит компоненты сверху вниз. Когда встречает `Suspense` с async-компонентом, стрим приостанавливается до резолва. Поэтому правильное разбиение на Suspense-блоки критично. ## 📌 Реальные кейсы - **Медленный API** — страница с товарами: шапка + меню отправляются сразу (50ms), список товаров подгружается 300ms. Без стриминга пользователь ждёт 350ms. Со стримингом — видит шапку через 50ms, товары появляются через 300ms. Воспринимаемая скорость выше. - **Edge-рантаймы (Cloudflare Workers, Vercel Edge)** — `renderToWebStream` работает в них нативно, а `renderToString` требует буферизации всего ответа в памяти (ограниченной на edge). ## Частые ошибки ```javascript // ❌ res.send() после stream.pipe() — конфликт const html = await renderToString(app) res.send(html) // нельзя смешивать send и pipe // ✅ Выбирай одну стратегию: либо renderToString + res.send, // либо renderToNodeStream + res.write/pipe ``` ```javascript // ❌ Установка заголовков после начала стрима stream.pipe(res) res.setHeader('X-Custom', 'value') // слишком поздно, заголовки уже отправлены // ✅ Заголовки до первого write/pipe res.setHeader('Content-Type', 'text/html') res.setHeader('X-Custom', 'value') res.write('...') stream.pipe(res, { end: false }) ``` ```javascript // ❌ Не обрабатывать ошибки стрима stream.pipe(res) // ✅ Обработка ошибок stream.on('error', (err) => { console.error('SSR stream error:', err) if (!res.headersSent) { res.status(500).send('Server Error') } else { res.end() // заголовки уже ушли — просто закрываем } }) ``` ## Резюме `renderToNodeStream` / `renderToWebStream` вместо `renderToString`. Сервер начинает отправлять HTML сразу. TTFB улучшается. `Suspense`-границы определяют, где стрим приостанавливается. Заголовки ставь до начала стрима. Для edge-рантаймов используй Web Streams API. ---

Как реализовать streaming SSR в Vue?