Streaming SSR with renderToWebStream
renderToWebStream() vs renderToString(), HTTP streaming, TTFB improvement, chunk flushing.
From renderToString to Streaming
Classic SSR uses renderToString, which builds the entire HTML in memory before sending a single byte. The browser waits idle until the whole page is ready.
Streaming SSR sends HTML in chunks as the app renders, so the browser starts parsing earlier.
renderToWebStream Basics
Vue's server renderer offers streaming functions. renderToWebStream returns a ReadableStream (Web Streams API), while renderToNodeStream/pipeToNodeWritable target Node's stream interface.
Each chunk is flushed as the component tree resolves.
import { renderToWebStream } from 'vue/server-renderer'
import { createSSRApp } from 'vue'
import App from './App.vue'
const app = createSSRApp(App)
const stream = renderToWebStream(app)All lessons in this course
- Vue Suspense Component
- Async Components with defineAsyncComponent
- Streaming SSR with renderToWebStream
- Deferred Hydration Strategies