📝 Next.js Handbook

Streaming

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.

Good Practice

It may vary depending on the application, but generally it is a good practice to use the Component level strategy.

📋 Examples

Click on the tabs below to see the different streaming effects in action:

Page loading...