How do you implement streaming SSR in Nuxt.js?

Answer

Streaming SSR allows the server to send HTML to the browser in chunks as it's generated, rather than waiting for the entire page to render before sending the first byte. This significantly improves Time to First Byte (TTFB) for pages with slow data fetching. Nuxt 3 supports streaming via Nitro's experimentalStreaming option (configurable in nuxt.config.ts). When enabled, Nuxt uses Vue's renderToWebStream() or renderToNodeStream() instead of renderToString(). The browser can start parsing and rendering the initial HTML (navigation, layout) while slower data fetches complete. Suspense boundaries are used to define which parts can stream independently. The Nuxt NuxtLoadingIndicator component complements this by showing progress during navigation.