Advanced
Stream each slow part on its own
This page is server-rendered with renderToReadableStream and streamed into #root (the code at the bottom plays the browser). Two slow "queries" finish when you click the buttons Finish details and Finish reviews.
Right now one <Suspense> boundary wraps both parts, so the price can't appear until the reviews are ready too. Give each part its own boundary, with the fallbacks Loading details... and Loading reviews..., so the price streams in as soon as the details finish.
What Check tests
- The shell shows the heading and both fallbacks
- After Finish details, the price appears while reviews still load
- After Finish reviews, the reviews appear
- Uses two
<Suspense>boundaries
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
Console
Nothing logged yet.