We've seen how the use API can be used to evade a promise in a react component. But what's even more amazing about the stable function is that it can seamlessly stream the result of a promise from the server to the client browser. Consider a sample page for a lesson video. It has the NAV one top followed by three dynamic sections, which are the table of contents, the lesson video, and the lesson description. These dynamic sections depend upon an API fetch lesson, which loads the lesson details. This API is not exposed to the public, which means that a call to this particular function can only

be made from the server. We make the call on the server await the response before rendering the ui. Unfortunately, this means that the user will not see any user interface while this API is spending, and we can demonstrate it within the browser. If you visit this page, the user is left hanging till that API resolves, and then we see the final fully rendered ui. One solution to this problem would be to move the fetch calls within the individual components, but there are two issues with that approach. First, we would end up with three fetch calls instead of one.

And secondly, these calls cannot even be made from the clients as we've mentioned before. So your mission should choose to accept it, is to find a way to make the fetch call only once on the server and then stream the results to the individual client components. This problem can be solved with the use API instead of awaiting the promise on the server. We make the API call from the server as it can be only done on the server, but we no longer await the result. And instead of passing in the resolved values to the components, we pass the promise to the individual components.

Right now we are getting errors because the components are expecting the resolved values. But let's modify that. We changed the props of the individual component to accept a promise to the final lesson and then utilize the use API that is built into react that we have looked at before to get the resolve value when the promise will fulfill. Here we've modified the table of contents component to use this new pattern. Let's make the same changes for the other components, which is the lesson video. We accept the promise and then await the resolution with the use API. And finally, within the lesson description,

we make the same change. We modify the prop to be a promise and then again wait for the final resolve value using use. With our components modified. If we jump back to the homepage, you can see that the errors have gone away. Now while these components are waiting for that promise to resolve, we would like to show a fallback UI to the users. We already know how to achieve that quite easily. Using suspense, we wrap up the dynamic portions with the suspense boundary, providing a fallback user interface. And now when we visit the application within the browser, the fetch lesson request will be made on the server.

But since we are not waiting for it, we will get back anything that is not dynamic. For example, the nav, the dynamic portions that are pending on that promise are wrapped by the suspense, which is why we see the loader. And eventually, once that promise resolves, the client components are free to render. I.