Do I need a `loading.tsx` to stream?

No. A ` ` in the right place is enough. `loading.tsx` wraps the whole segment and only fits a page that loads as one unit.

Does streaming slow the server down?

No, the total work is the same. Only the distribution changes: the first byte leaves earlier and pieces follow as they resolve.

Can I put a boundary inside a client component?

Yes, but the suspended child must be a server component passed as children. A client component cannot render an async component itself.

How do I stop the skeleton from shifting the layout?

Give the fallback the same height as the final content, with `min-height` or a fixed grid of rows. The browser measures the rest.

Does streaming work with static export?

No. With `output: "export"` the page is a finished file, and no server can send chunks after the first byte.

React

Streaming and Suspense in the App Router

Streaming sends the shell while the server works. Where the Suspense boundary goes, what it costs and when it is useless: structure, code and limits.

2026-11-01

Key points

One `` boundary around the slow widget is enough: the shell leaves at once.
`loading.tsx` wraps the whole segment and loses per-panel granularity.
The skeleton must match the height of the final content, or it causes CLS.
A static page is prerendered: it does not stream and the boundary buys nothing.

Streaming sends HTML to the browser while the server is still working: the shell appears at once and the slow data follows. In the App Router a single `` boundary around the slow part is enough.

What actually happens

React renders the tree on the server and sends the first chunk with the shell: header, title, skeleton. When a promise resolves, the fragment arrives as an inline `