Streaming

Streaming sends the route shell early and flushes completed segments as async Server Components resolve. `loading.tsx` and Suspense boundaries define what users see while slow data loads.

					export default function Page() {
  return (
    <>
      <Header />
      <Suspense fallback={<Skeleton />}>
        <SlowRecommendations />
      </Suspense>
    </>
  );
}
				

Streaming improves perceived latency without waiting for the slowest fetch to block the entire page.

On interviews: explain shell-first delivery, boundary placement, and error handling in nested Suspense.

Common pitfalls: one giant async page without boundaries, streaming dynamic content that should be static, and waterfalls inside parallel segments.

The trade-off is complexity of boundary design versus better TTFB and progressive paint.

Checklist:

• Wrap slow server components in Suspense.
• Keep above-the-fold shell fast.
• Pair with error.tsx for segment failures.
• Avoid serial awaits across independent data.