NextJS getServerSideProps() fetch multiple endpoints at once in delay

Question

Is there a way to fetch data from multiple API routes in a single getServerSideProps() in delay?

I encountered an 429 error(too many requests) when I was trying to fetch data from multiple endpoints at once with Promise.all().

Is there any method that I can use to fetch the multiple array endpoints in 1 second delay each?

async function getClients () {
  const res = await fetch('http://localhost:3000/api/clients')
  const json = await res.json()
  return Object.entries(json)
}

async function getDetails (clients) {
  const details = await Promise.all(
    clients.map(async (item) => {
      const url = 'http://localhost:3000/api/clients/' + item.clientId;
      const res = await fetch(url)
      const json = await res.json()
      return json
    })
  )
  return details
}

export async function getServerSideProps() {
  const clients = await getClients()
  const details = await getDetails(clients)

  return {
    props: {
      clients,
      details,
    },
  }
}

Is the `http://localhost:3000/api/clients` endpoint pointing to an internal API route? If so, you should avoid doing so. See [Internal API fetch with getServerSideProps? (Next.js)](https://stackoverflow.com/questions/65752932/internal-api-fetch-with-getserversideprops-next-js). That will avoid the API requests altogether and most likely solve the issue. — juliomalves, Jun 19 '22 at 21:44
@juliomalves It's pointing to an external API route. The endpoint above for example purposes only. And thanks for your advice, much appreciated! — Syafiq Syazre, Jul 06 '22 at 08:00

score 1 · Answer 1 · answered Jun 13 '22 at 12:18

You could try using the rate limiter that's part of the async-sema package.

It's also worth noting that you should avoid calling your Nextjs API routes from your getServerSideProps function. As it's already running on the server you can perform whatever logic is inside your API routes directly and avoid the penalty of an extra network hop.

import { RateLimit } from "async-sema";

async function getClients () {
  const res = await fetch('http://localhost:3000/api/clients')
  const json = await res.json()
  return Object.entries(json)
}

async function getDetails (clients) {
  const lim = RateLimit(5);
  const details = await Promise.all(
    clients.map(async (item) => {
      await lim();
      const url = 'http://localhost:3000/api/clients/' + item.clientId;
      const res = await fetch(url)
      const json = await res.json()
      return json
    })
  )
  return details
}

export async function getServerSideProps() {
  const clients = await getClients()
  const details = await getDetails(clients)

  return {
    props: {
      clients,
      details,
    },
  }
}

NextJS getServerSideProps() fetch multiple endpoints at once in delay

1 Answers1