- All Courses
- Next.js for Production
- Data Fetching and Caching
- Streaming with Suspense boundaries
Lesson 2.4
Streaming with Suspense boundaries
Without streaming, the response waits for every await on the page.
26mIntermediate13k students
Overview
Do not let the slowest query set the pace
Without streaming, the response waits for every await on the page. One slow recommendation service and the entire document is held back, including the header the user could have seen instantly.
A Suspense boundary breaks that coupling. Everything outside it is flushed to the browser immediately with the fallback in place, and the real content is streamed in when it resolves.
A loading file is exactly this: an implicit Suspense boundary around the route segment. Nesting boundaries more tightly gives you finer control over what appears when.
Streaming does not make your data faster. It stops one slow query from holding the whole page hostage.
In this lesson you will:
- Send the fast part of a page first
- Place a boundary around the slow subtree
- Improve perceived load without faster data
Resources
Notes are not saved yet — they clear when you leave this page.
Previous Lesson
Revalidation: time-based and on-demand
17m
Writing your first Server Action
7m