Questions about preload and Promise.all([getX(), getY(), getZ()])
Unanswered
Transvaal lion posted this in #help-forum
Transvaal lionOP
Consider the following code.
layout.tsx (could also be page.tsx)
Navigation.tsx (server component, child of layout/page.tsx above)
1. does multiple preload calls run in parallel or is it better to use Promise.all?
2. does preloading make sense if you do not have any blocking calls after it inside that same server component or page/layout.tsx?
3. if you have preloaded data in the parent component, is it better to then use Promise.all or await each individual call in the child component? (you've already started preloading them in the parent component)
layout.tsx (could also be page.tsx)
preloadFoo()
preloadBar()
preloadBas()
// does preloading even make sense in itself if there's not any blocking
// data fetching going on in this component?
// E.g:
// super slow blocking request so we eagerly run 3x preload in parallel before?
// const qux = await getQux();
return (
<div>
<Navigation />
</div>
)Navigation.tsx (server component, child of layout/page.tsx above)
const [foo, bar] = await Promise.all([getFoo(), getBar()]);
// const foo = await getFoo();
// const bar = await getBar();
if (!foo || !bar) {
notFound();
}
return (...);1. does multiple preload calls run in parallel or is it better to use Promise.all?
2. does preloading make sense if you do not have any blocking calls after it inside that same server component or page/layout.tsx?
3. if you have preloaded data in the parent component, is it better to then use Promise.all or await each individual call in the child component? (you've already started preloading them in the parent component)