Difficulty with deploying Next.js to Vercel due to restrictions on rate limits when utilizing getStaticProps()

Question

Difficulty with deploying Next.js to Vercel due to restrictions on rate limits when utilizing getStaticProps()

In my Next.js project connected to Apollo, I have around 50 static URLs fetching data using getStaticProps(). The performance is great, and I enjoy how the pages load. However, a problem arises when Vercel builds the static versions of these pages during deployment - I tend to hit the rate limits for the API after about 40 pages are built. Since I cannot control these rate limits, I'm looking for a way to throttle my data calls within each getStaticProps to stagger them at build time. My current getStaticProps function on each page looks something like this:

export async function getStaticProps() {
  const apolloClient = initializeApollo()

  await apolloClient.query({
    query: XXXXXXX,
    variables: {handle: "XXXXXXX"}
  })

  return {
    props: {
      initialApolloState: apolloClient.cache.extract(),
    },
    revalidate: 1,
  }
}

Everything was running smoothly until I had more pages and started hitting the rate limit issue.

javascript next.js apollo vercel

Answer 1

Answer №1

During the production build, I successfully managed to slow down my requests by 100ms using a setTimeout function wrapped inside a promise. This approach worked perfectly for me.

const delayRequest = (milliseconds, apolloClient) => {
return (
    new Promise(function(resolve, reject){
        setTimeout(() => {
            const request = apolloClient.query({
                query: XXXXXX,
                variables: {handle: "XXXXXX"}
            });
            resolve(request);
        }, milliseconds)
    });
)

};

export async function getStaticProps() { const apolloClient = initializeApollo()

await delayRequest(200, apolloClient)

return {
  props: {
    initialApolloState: apolloClient.cache.extract(),
  },
  revalidate: 1,
}

}

Answer 2

During the production build, I successfully managed to slow down my requests by 100ms using a setTimeout function wrapped inside a promise. This approach worked perfectly for me.

const delayRequest = (milliseconds, apolloClient) => {
return (
    new Promise(function(resolve, reject){
        setTimeout(() => {
            const request = apolloClient.query({
                query: XXXXXX,
                variables: {handle: "XXXXXX"}
            });
            resolve(request);
        }, milliseconds)
    });
)

};

export async function getStaticProps() { const apolloClient = initializeApollo()

await delayRequest(200, apolloClient)

return {
  props: {
    initialApolloState: apolloClient.cache.extract(),
  },
  revalidate: 1,
}

}

Answer 3

Answer №2

By default, NextJS tends to engage in multithreading during the build process, leading to multiple simultaneous HTTP requests that may overwhelm the server. The specifics of this default configuration and its implications on the build server are unknown to me.

To mitigate this, you can make adjustments in your next.config.js file to ensure a single-threaded approach when handling getStaticProps and getStaticPaths requests:

    ...
    experimental: {
        workerThreads: false,
        cpus: 1
    },
    ...

You can refer to this link for more insights on this configuration:

In my personal experience, adopting this method has proven effective in reducing rate limit issues with the content server.

Answer 4

By default, NextJS tends to engage in multithreading during the build process, leading to multiple simultaneous HTTP requests that may overwhelm the server. The specifics of this default configuration and its implications on the build server are unknown to me.

To mitigate this, you can make adjustments in your next.config.js file to ensure a single-threaded approach when handling getStaticProps and getStaticPaths requests:

    ...
    experimental: {
        workerThreads: false,
        cpus: 1
    },
    ...

You can refer to this link for more insights on this configuration:

In my personal experience, adopting this method has proven effective in reducing rate limit issues with the content server.

Difficulty with deploying Next.js to Vercel due to restrictions on rate limits when utilizing getStaticProps()

Answer №1

Answer №2

Similar questions

Managing the jQuery.noConflict function

What is the mechanism behind the jQuery ready function that enables its first parameter to transform into a jQuery object?

Filter your DataTables columns by searching for text within a specific range

Accessing the host in NextJS using _document.js or _app.js

Implementing an API route to access a file located within the app directory in Next.js

Parameter within onClick function that includes a dot

Retrieve an array of information from a firestore database query

Improving callback functions in Express/NodeJs for a more pleasant coding experience

javascript alter css property display to either visible or hidden

Numerous column pictures that occupy the entire browser screen

Using jQuery in Rails 3 to display the id of a td element

Leveraging Forms for Entering Google Maps Information

What is the process for reversing the texture application direction on a CylinderGeometry object?

Using Javascript to dynamically add an element to an array with a unique index

Learn to display multiple collections of data on a webpage using Node.js and MongoDB

A Comprehensive Guide: Obtaining the Final Tab from a JSON using API

The component 'ProtectRoute' cannot be utilized within JSX

Is next.js the fastest server-side page rendering solution available?

How can you refresh a functional component using a class method when the props are updated?

What is the reason behind having to refresh the page or switch to another tab for the field to display?