How does streaming SSR work in Next.js 13+? What role does Suspense play?

Question

Accepted Answer

Streaming SSR represents a fundamental shift in how Next.js renders pages. Traditional Server-Side Rendering (SSR) blocks the response until all data is fetched and all components are rendered on the server, creating a 'all or nothing' waterfall where users stare at a blank screen until everything is ready . Streaming SSR, introduced in Next.js 13 with the App Router and React 18, breaks this paradigm by allowing the server to send HTML to the browser progressively—as soon as any part of the page is ready, it streams immediately . This means users see content almost instantly, while slower components load in the background and stream in when complete. The technical foundation is React 18's `renderToPipeableStream` API (replacing the synchronous `renderToString`), combined with Suspense boundaries that mark where streaming can occur . // Traditional SSR (Next.js 12 and Pages Router) // All data must be fetched before ANY content is sent to browser export async function getServerSideProps() { // Slow API call (3 seconds) const posts = await fetch('https://api.example.com/posts'); // Another slow API call (2 seconds) - total 5 seconds blocking const comments = await fetch('https://api.example.com/comments'); return { props: { posts, comments } }; } // Browser sees NOTHING for 5 seconds, then gets complete HTML // Streaming SSR (Next.js 13+ App Router) // Content streams progressively as components resolve import { Suspense } from 'react'; import PostsList from './PostsList'; import CommentsSection from './CommentsSection'; export default function Page() { return (

{/* This header streams immediately */}

My Blog

{/* Posts stream after 3 seconds, doesn't block page */} Loading posts...

}> {/* Comments stream after 2 more seconds, also non-blocking */} Loading comments...}> ); } // Browser sees header instantly, posts at 3s, comments at 5s Chunked transfer encoding: The server uses HTTP/1.1's Transfer-Encoding: chunked (or HTTP/2 streaming) to send HTML in multiple chunks over time, rather than one large response . renderToPipeableStream: React 18 replaces the synchronous renderToString with this streaming API, allowing the server to start sending HTML immediately while continuing to render . Suspense boundaries: Components wrapped in Suspense become streaming boundaries—their fallback UI is sent immediately, and the real content streams later when data resolves . Selective hydration: After streaming to the client, React hydrates components selectively—prioritizing visible and interactive parts first, and hydrating streamed components as they arrive . RSC Payload integration: In Next.js, streaming also delivers the RSC Payload (binary component tree representation) alongside HTML, enabling seamless client-side navigation without full page reloads . Suspense is the cornerstone of streaming SSR in Next.js 13+. It serves multiple critical functions: First, it defines streaming boundaries—components wrapped in Suspense become independent rendering units that can stream separately. Second, it provides fallback UI (spinners, skeletons) that renders immediately while the real component loads . Third, and most importantly, Suspense enables non-blocking rendering—the server can send the fallback and continue rendering the rest of the page, unblocking the critical path . Without Suspense, Next.js would have to wait for every component to finish before sending anything. With Suspense, you get progressive enhancement automatically: the browser displays the fallback immediately, and when the async component resolves, React seamlessly replaces it with the final content . // Pattern 1: Component-level streaming with custom fallback import { Suspense } from 'react'; import { ArticleContent, Comments, RelatedArticles } from './components'; export default function ArticlePage({ params }) { return (

{/* This streams immediately - no Suspense needed */}

{params.title}

{/* Article content streams when ready */} }> {/* Comments and related articles stream independently */} Loading comments...}> Loading related...}>

); } // Pattern 2: Route-level streaming with loading.tsx // app/products/loading.tsx - Automatically wraps page in Suspense export default function ProductsLoading() { return (

{[1,2,3].map(i => )}

); } /

How does streaming SSR work in Next.js 13+? What role does Suspense play?

Streaming SSR in Next.js 13+ allows the server to send HTML in chunks as components render, with Suspense defining loading boundaries and enabling progressive rendering without blocking the initial page load

How does streaming SSR work in Next.js 13+? What role does Suspense play?

Streaming SSR in Next.js 13+ allows the server to send HTML in chunks as components render, with Suspense defining loading boundaries and enabling progressive rendering without blocking the initial page load

Scenario Questions

Follow-up Questions