Streaming is recommended to prevent slow data requests from blocking the whole page, and to allow interaction with the UI without waiting for everything to load. There are three ways of implementing it:
| Strategy | Implementation | Effect |
|---|---|---|
| At the Page level (most basic) | Add a loading.tsx | The whole page is streamed. The content will be displayed all at once, so a slower data fetch in one of the components may lead to a longer loading time. |
| At the Component level | Wrap each component in <Suspense> and fetch data in the components | Each component is streamed individually. That may lead to parts of the UI popping in as each component is ready. |
| At the Section level | Wrap the section in <Suspense> and fetch data in the section | The section is streamed, so the components inside of it will be displayed at the same time. That may create a more staggered effect in the UI. |
Click on the tabs below to see the different streaming effects in action: