Streaming and Suspense
Streaming allows a page to send useful UI to the browser before every piece of data is ready. React Suspense boundaries define areas that can show fallback content while slower server work completes.
A dashboard might render its navigation immediately while a slow analytics query continues. The user sees the shell first instead of waiting for the slowest operation.
Streaming is especially valuable when a page contains independent data sources with different response times.
Suspense Boundary
import { Suspense } from 'react';
export default function Dashboard() {
return (
<main>
<h1>Dashboard</h1>
<Suspense fallback={<p>Loading analytics...</p>}>
<Analytics />
</Suspense>
</main>
);
}💡 The dashboard shell can be rendered while Analytics resolves independently.
Key Takeaways
- Streaming improves perceived performance.
- Suspense lets slow portions of a page load independently.
- Do not create arbitrary Suspense boundaries; place them around meaningful slow or independent UI.