Best way to run parallel prefetching for SSR

[callumbooth]

Based on the docs for NextJS one of the ways it suggests to handle hydration is to use the queryCache.prefetch function like so:

 export async function getStaticProps() {
   const queryCache = new QueryCache()
 
   await queryCache.prefetchQuery('posts', getPosts)
 
   return {
     props: {
       dehydratedState: dehydrate(queryCache),
     },
   }
 }

However if you have two requests that need prefetching like so:

export async function getStaticProps() {
   const queryCache = new QueryCache()
 
   await queryCache.prefetchQuery('posts', getPosts)
   await queryCache.prefetchQuery('comments', getComments)
 
   return {
     props: {
       dehydratedState: dehydrate(queryCache),
     },
   }
 }

Won't this cause the two requests to be run in serial rather than parallel?

For now I'm using Promise.allSettled but just wondered if this is the best/recommended way?

export async function getStaticProps() {
   const queryCache = new QueryCache()
 
   await Promise.allSettled([
      queryCache.prefetchQuery('posts', getPosts)
      queryCache.prefetchQuery('comments', getComments)
   ])
 
   return {
     props: {
       dehydratedState: dehydrate(queryCache),
     },
   }
 }

[nick-0101]

This is the recommended answer from Tkdodo https://stackoverflow.com/a/73760895/13203366