Streaming in Next.js
Watch the server send HTML in chunks. Each section flashes yellow when it arrives, so you can literally see streaming happen.
Page-level streaming with loading.tsx
A loading.tsx skeleton appears instantly. After ~2 seconds, the async Server Component resolves and the real content streams in, highlighted with a flash animation.
app/loading-demo/loading.tsxGranular streaming with <Suspense>
Two sibling <Suspense> boundaries wrap async Server Components that resolve independently (1s and 3s). Watch them stream in one at a time, each highlighted on arrival.
app/suspense-demo/page.tsxHydration: single pass
Three heavy Client Components with no Suspense boundaries. React hydrates them all in one blocking task. Open the Performance tab in DevTools and reload to see it.
app/hydration-single/page.tsxHydration: split with Suspense
Same three components, each wrapped in <Suspense>. React hydrates them as separate smaller tasks, yielding to the browser between each one. Compare with the single-pass version.
app/hydration-split/page.tsxRaw HTML streaming + early CSS
A GET Route Handler (not a React page) that streams a raw HTML document in 3 chunks. The first chunk includes <head> with a stylesheet link, so the browser fetches CSS immediately while HTML keeps streaming. Watch your terminal: the CSS request arrives between chunks. Each page gets a unique token so you can trace it.
app/api/html-stream/route.tsRoute Handler: ReadableStream
A plain-text stream that drips chunks at a configurable interval. Visit directly in your browser or use curl. Try ?size=10 (tiny chunks, Safari buffers these) or ?size=1024 (paints immediately).
app/api/stream/route.ts