TTC
Theo's Typesafe Cult•3mo ago
sens

NextJS streaming: use(<data_promise>) in CC or await data in parent SC?

page.tsx (SC)
  -> <Suspense fallback={<Spinner/>}>
       <DataWrapper.tsx> // This SC does the `await fetchSettings()`
         -> <DataForm.tsx settings={resolvedData} /> (CC)
       </DataWrapper.tsx>
     </Suspense>
page.tsx (SC)
  -> <Suspense fallback={<Spinner/>}>
       <DataWrapper.tsx> // This SC does the `await fetchSettings()`
         -> <DataForm.tsx settings={resolvedData} /> (CC)
       </DataWrapper.tsx>
     </Suspense>
VS 
page.tsx (SC) // Does `const settingsPromise = fetchSettings()`
  -> <Suspense fallback={<Spinner/>}>
       <DataForm.tsx settingsPromise={settingsPromise} /> // This CC uses `const data = use(settingsPromise)`
     </Suspense>
page.tsx (SC) // Does `const settingsPromise = fetchSettings()`
  -> <Suspense fallback={<Spinner/>}>
       <DataForm.tsx settingsPromise={settingsPromise} /> // This CC uses `const data = use(settingsPromise)`
     </Suspense>
1 Reply
bythewayitsjosh
bythewayitsjosh•3mo ago
My immediate thought would be option B. You remove the need for an extra <DataWrapper /> component, which simplifies your code and the cognitive load on developers. I'm fairly sure in terms of the UI / loading behaviour there's no difference, since you're suspending that component tree until the promise resolves in either case. However, if there are other parts of <DataForm> that you may want to render first, that would impact the decision.

Did you find this page helpful?