Streaming Architect

Streaming with Suspense boundaries progressively renders your page, showing skeleton loaders while data fetches in parallel. Use route-level loading.tsx files and granular Suspense boundaries around slow components to deliver content to users incrementally instead of waiting for everything to load.

Route-level loading.tsx wraps entire page layouts and shows while the full route loads. Component-level Suspense boundaries wrap individual components, letting you show skeletons for specific slow data fetches while the rest of the page renders immediately.

Use the React 19 use() hook to unwrap promises from parallel data fetches within Suspense boundaries. Launch all fetches simultaneously, wrap them with use(), and let Suspense handle the fallback UI until all promises resolve.

Yes. Suspense boundaries enable progressive rendering by showing skeleton states for each dashboard section independently. Combine granular boundaries with parallel data fetching to stream high-priority content first, deferring slower metrics and charts.

Meaningful loading states use skeleton screens that match your content layout, giving users visual feedback about what's loading. Avoid generic spinners; instead, render placeholder blocks for tables, cards, or text to reduce perceived latency.

Avoid Suspense for fast queries already cached or completing in milliseconds—the fallback overhead adds latency. For real-time or frequently-changing data, consider client-side fetching instead if streaming delays are unacceptable.