Suspense Usage Patterns
As you have learned, the Suspense component can be wrapped around components that fetch data as part of their rendering process—as long as they do it in a compliant way.
Of course, in many projects, you may have multiple components that fetch data and that should display some fallback content while doing so. Thankfully, you can use the Suspense component as often as needed—you can even combine multiple Suspense components with each other.
Revealing Content Together
Thus far, in all examples, Suspense was always wrapped around exactly one component. But there is no rule that would stop you from wrapping Suspense around multiple components.
For example, the following code is valid:
function Shop() {
return (
<>
<h1>Welcome to our shop!</h1>
<Suspense fallback={<p>Fetching shop data...</p>}>
<DailyDeal />
<Products />
</Suspense>
...
