Streaming Demo
A companion app for the Next.js Streaming guide. Each route isolates a single streaming concept so you can see it in action — chunks arrive progressively, fallbacks flash yellow as they're replaced, and hydration differences are visible in DevTools.
Demos
| Route | What it demonstrates |
|---|---|
/loading-demo | Page-level streaming with loading.tsx — skeleton appears instantly, content streams in after ~2s |
/suspense-demo | Granular streaming with sibling <Suspense> boundaries that resolve independently (1s and 3s) |
/hydration-single | Three heavy client components hydrate in a single blocking pass — buttons are unresponsive until all three finish |
/hydration-split | Same components wrapped in <Suspense> — React hydrates them as separate tasks, yielding to the browser between each |
/api/html-stream | Raw HTML streaming from a Route Handler with early CSS discovery — watch the server logs to see the stylesheet fetched while HTML is still streaming |
/api/stream | A configurable ReadableStream of plain text — adjust ?chunks, ?size, and ?delay to experiment with browser buffering |
Getting started
pnpm install
pnpm devOpen http://localhost:3000.
What to look for
- Yellow flash: All streamed content animates with a yellow highlight when it arrives, so you can see exactly when each chunk paints.
- DevTools Performance tab: Compare
/hydration-single(one long task) vs/hydration-split(three shorter tasks with yields). - Browser buffering: Visit
/api/stream?chunks=10&size=10&delay=200in Safari — small chunks get buffered. Change tosize=1024and they flush immediately. - Server logs: The
/api/html-streamroute logs each chunk and the CSS request to the terminal, showing the order of events.
Learn more
- Streaming guide — the full guide this demo accompanies
loading.jsAPI reference- Route Handler API reference