Was ist Streaming SSR?

Streaming SSR ist eine Variante des server-side-rendering-ssr, bei der der Server HTML in Chunks zum Browser flusht, sobald Teile der Seite fertig sind, statt auf die komplette Antwort zu warten. In Storefronts mit vielen Upstream-APIs verwandelt Streaming langsame Aggregations-Renders in schnelle, progressive Paints.

Definition

Moderne Frameworks wie Next.js, Remix und SvelteKit implementieren Streaming über die Web-Streams-API, React 18 renderToPipeableStream beziehungsweise renderToReadableStream und Suspense-Boundaries. Der Render-Path startet mit Document-Shell, Head-Tags und Above-the-fold-Inhalt. Langsame Segmente wie ein recommendation-engine-Widget oder ein personalization-Block werden in Suspense-Fallbacks gehüllt und ersetzt, sobald die echten Daten da sind. Der Browser bekommt eine einzige lange HTTP-Antwort und paintet progressiv, was sowohl gefühlte TTFB als auch LCP verbessert. Streaming passt natürlich zu React Server Components, Edge Rendering auf Vercel Edge oder Cloudflare Workers und einem aggressiven Cache-Layer für Datenabrufe.

Warum es zählt

Ohne Streaming definiert der langsamste API-Call die TTFB. 300 ms Commerce-API plus 250 ms personalization plus 200 ms CMS-Read sprengen ein 750-ms-TTFB-Budget. Streaming SSR kollabiert diese Decke, indem es die Shell schon nach der schnellsten Abhängigkeit ausspielt und den Rest nachschiebt. LCP kann auf bereits gestreamtem Inhalt feuern, während der Rest noch auflöst. Für die Core Web Vitals ist der Effekt drastisch: schnellere Paints, weniger leere Screens und eine ruhigere INP, weil Hydration progressiv läuft. Auch der Server-Memory-Druck sinkt, weil keine großen Response-Buffer gehalten werden.

Anwendungsfälle

Headless-Storefronts auf Next.js App Router streamen zuerst Shell und Hauptproduktinfo und enthüllen progressiv Reviews, Related Products, recommendation-engine-Carousels und personalisierte Banner. PLPs streamen Filter und die erste Produktseite, während schwere Facetten auflösen. Edge Rendering beschleunigt das Pattern weiter, indem der Streaming-Renderer in nahen PoPs läuft. Feingranulares Suspense für träge Downstream-Services verhindert, dass ein wackeliger personalization-Anbieter das Dokument blockiert. In einem composable-commerce-Stack ist Streaming SSR oft die entscheidende Fähigkeit, die SSR schnell genug macht, um schweres Client-Rendering zu ersetzen.

Verwandt

Mehr dazu: Composable Headless Frontend · Performance and Core Web Vitals.