Current section: Server Components 27 exercises
Problem

Streaming

Loading exercise

Transcript

00:00 So we've got a bit of a problem here and that is if we have one of these Data requests that we're making so like the search ships or the ship details if one of those is slow Then the entire app experience is going to be slow. So our Kelly the co-worker

00:16 Updated our ship API so that we have an arbitrary delay on the ship search endpoint and you notice the entire application takes a long time Because of this so imagine you had a product or you were making e-commerce platform You got the product details and stuff you want people to see that as soon as possible So they don't leave with their money

00:34 But you also have comments and reviews and stuff you want people to be able to see that so they can make the right choice And not get a product that they weren't expecting You know what it was right and so you have like maybe reviews take a while to load There's more of them. That's like you're doing some fancy sorting or filtering whatever and so it's going to take a while

00:53 You don't want that to slow down the product details, and that's the same sort of thing here So the really really cool thing about RSC's is that the out-of-order streaming support? Just like naturally happens as a result of these so We are going to add some suspense boundaries around this area of our

01:14 React tree and this area of our react tree so that they can be Separate and then as the different components are resolved or or the suspense they've finished suspending Then the UI for those can be sent over to the client this will also be really cool when when you're finished with this This will also be really cool to see what RSC

01:35 the RSC endpoint looks like Because you'll actually see the various aspects loading in after the fact we can see some of that already So it's actually really really quite interesting to see how those things pop in I do want you to pull this up once you're finished Adding some of your suspense boundaries because that will impact the way that this loads as well

01:55 So give this a whirl add some suspense boundaries, and we'll see you when you're done