javascript - Next.js:getStaticProps 不更新生产中的获取值

Question

我基本上是在 Next.js 上开发一个博客。因为它是负责后端的另一个团队，所以我目前正在从 getStaticProps 获取 API 调用以获取我的文章，即使直接进行数据库查询是更好的做法:

export async function getStaticProps({ params, res }) {
    try {
        const result = await fetch(`${API.baseURL}/get_article/${params.id}`);
        const article = await result.json();

        return {
            props: { article },
        };
    } catch (error) {
        res.statusCode = 404;
        return { props: {} };
    }
}

虽然这在开发模式下完美运行，但获取文章、编辑它，然后再次访问它在生产中不起作用(即使在本地，使用构建版本)。
我想这与 Next.js 以某种方式处理缓存有关......我做错了什么？谢谢!

Answer 1

首先是函数的参数getStaticProps即 context对象没有任何名为 res 的属性.所以res.statusCode = 404;在这里不做任何事情。
和getStaticProps用于静态网站生成 ，另外对于动态路由，可以导出另一个函数getStaticPaths它应该生成并返回一个路径数组，其中包含 getStaticProps 的动态路由参数将调用 build 时间对于 预渲染 页面。
在开发模式下，将根据请求调用数据获取方法，以便您的代码正常工作。但在生产模式下，它会显示 预渲染静态 pages 这意味着页面将在呈现时显示内容，如果您编辑和更新内容，它将不会反射(reflect)在页面上。
如果您决定使用静态站点生成，您必须在更新博客后重建整个站点，或者您必须拥有某种 客户端 data-fetching当您更新其内容时将更新博客的逻辑。
对于客户端数据获取，您可以使用类似 swr或 react-query
这是一些可能有助于预渲染页面的伪代码，
路线 /article/[articleId]

export async function getStaticPaths() {
  const articles = await /* db query to get the list of articles or fetch from remote API*/

  // generate a list of paths with route params
  const paths = articles.map(article => ({ params: { articleId: article.id }}))

  return {
     paths,
     fallback: false 
     // fallback can be  true if you want to show a fallback version of page 
     // and serve JSON for unknown articles
  }

}


export async function getStaticProps(ctx) {
    try {
        const result = await fetch(`${API.baseURL}/get_article/${params.id}`);
        const article = await result.json();

        return {
            props: { article },
        };
    } catch (error) {
        return {
          props: null
        }
    }
}

了解更多关于如何 fallback作用于函数的返回值 getStaticPaths docs .
另一种选择是使用 getServerSideProps 作为将在每次请求页面时调用的数据获取方法，但 TTFB(到第一个字节的时间)会更高。所以对于博客网站，我不建议使用 getServerSideProps .