How does streaming with Suspense work in Next.js?

Summary

The server sends HTML in chunks: the shell (layout plus fast parts) is sent immediately, and slower components wrapped in <Suspense fallback={...}> stream in when their data resolves, without blocking the whole page.

Longer Answer

loading.tsx automatically wraps a page in Suspense. Place Suspense boundaries around slow, independent sections (recommendations, comments) to improve Time To First Byte and First Contentful Paint. Streaming works with SSR; SEO still gets the full HTML, since crawlers receive the completed stream.

Code Example

import { Suspense } from "react";

export default function ProductPage({ params }: { params: Promise<{ id: string }> }) {
  return (
    <>
      <ProductDetails params={params} />
      <Suspense fallback={<p>Loading reviews…</p>}>
        <Reviews params={params} /> {/* slow async server component */}
      </Suspense>
    </>
  );
}

Key Points

• Shell first, slow parts stream later
• loading.tsx = route-level Suspense
• Granular <Suspense> boundaries
• Improves TTFB/FCP