Q21: What is Streaming SSR and how do Suspense boundaries speed up TTFB?
Streaming SSR breaks HTML page rendering into progressive chunks. Instead of delaying the entire server response until slow database queries complete, Next.js streams the initial HTML shell immediately. Slower subtrees wrapped in <Suspense> stream into place as data completes.
Streaming Slow Subtree with Suspense
import { Suspense } from 'react';
import SlowFeed from './SlowFeed';
export default function Page() {
return (
<main>
<h1>Fast Static Header</h1>
<Suspense fallback={<p>Loading feed...</p>}>
<SlowFeed /> {/* Streams in asynchronously when resolved */}
</Suspense>
</main>
);
}💡 The page shell renders immediately; SlowFeed streams over HTTP as soon as data resolves.
Key Takeaways
- Lowers Time to First Byte (TTFB) by sending HTML shell chunks immediately.
- Wrapped via
loading.jsor explicit<Suspense fallback={<Skeleton />}>boundaries.
Knowledge Check
What primary performance metric is improved by using Streaming SSR with Suspense boundaries?