Streaming sends HTML to the browser in chunks as Server Components resolve. Suspense marks boundaries where fallback UI shows until async children finish.
Automatic with loading.tsx
Placing loading.tsx in a segment creates a Suspense boundary—no manual wrapper required for that case.
Manual Suspense
import { Suspense } from 'react';
export default function Page() {
return (
<>
<h1>Dashboard</h1>
<Suspense fallback={<p>Loading chart…</p>}>
<SlowChart />
</Suspense>
</>
);
}UX payoff
Users see layout and fast sections immediately; slow widgets fill in—better than a blank screen until everything finishes.
Self-check
- How does streaming improve perceived performance?
- What is the relationship between
loading.tsxand Suspense?
Challenge
Stream simulation
- Click Stream page and watch fast shell appear before slow block.
Done when: fast header shows immediately; slow section appears after delay.
Tip: loading.tsx is Suspense with zero boilerplate—add manual <Suspense> when multiple independent slow blocks need separate fallbacks.