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,
},
}
}
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,
},
}
}