Skip to main content

Server Parallel Fetching

Source: .agents/references/coding-standard/vercel-react-best-practices/rules/server-parallel-fetching.md

Metadata​

  • title: Parallel Data Fetching in Page Data Functions
  • impact: CRITICAL
  • impactDescription: eliminates server-side waterfalls
  • tags: server, pages-router, parallel-fetching, getStaticProps, getServerSideProps

Content​

This repo: Pages Router only — parallelize with Promise.all inside getStaticProps / getServerSideProps (or shared data helpers), not async Server Component composition.

Parallel Data Fetching in Page Data Functions​

Sequential await in a page data function creates waterfalls. Start independent fetches together.

Incorrect (sidebar data waits for header):

import type { GetServerSideProps } from 'next'

export const getServerSideProps: GetServerSideProps = async () => {
  const header = await fetchHeader()
  const sidebarItems = await fetchSidebarItems()
  return {
    props: { header, sidebarItems }
  }
}

Correct (both fetch simultaneously):

import type { GetServerSideProps } from 'next'

export const getServerSideProps: GetServerSideProps = async () => {
  const [header, sidebarItems] = await Promise.all([
    fetchHeader(),
    fetchSidebarItems()
  ])
  return {
    props: { header, sidebarItems }
  }
}

With dependencies: start independent work first, then await dependents (see async-api-routes, async-parallel).