使用#getStaticProps将Next.js部署到Vercel的问题

问题描述

使用连接到Apollo的Next.js，我有50个左右的非动态url使用getStaticProps（）来获取数据。它的工作原理非常好，我喜欢页面的加载方式。我面临的问题是，由于Vercel在构建时会构建这些页面的静态版本，因此在大约40个页面被使用后，我很快达到了这些页面上使用的API的速率限制内置的。鉴于我无法控制这些速率限制，是否有任何方法可以限制每个#getStaticProps中的数据调用以在构建时将这些数据调用间隔开？我的#getStaticProps在每个页面上看起来都像这样：

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

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


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

}

一切正常，或者是在我的页面较少且页面没有达到速率限制的情况下。

解决方法

我最终在Promise中通过抛出带有请求的setTimeout限制了100ms的请求。完全按照生产构建的预期工作。

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

};

导出异步函数getStaticProps（）{ const apolloClient = initializeApollo（）

await sleep(200,apolloClient)

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

}