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将在构建时调用这些路径参数以预渲染页面。

在开发模式下，将根据请求调用数据获取方法，以便您的代码正常工作。但在生产模式下，它将显示预渲染的静态页面，这意味着页面将显示渲染时的内容，如果您编辑和更新内容，它将不会反映在页面上。

如果您决定使用静态站点生成，则必须在更新博客后重建整个站点，或者您必须具有某种客户端 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

        }

    }

}

详细了解函数docsfallback的返回值是如何工作的。getStaticPaths

另一种选择是getServerSideProps用作数据获取方法，该方法将在每次请求页面时调用，但 TTFB（到第一个字节的时间）会更高。因此，对于博客发布网站，我不建议使用getServerSideProps.

Answer 2

您必须添加revalidate参数。在这里了解更多信息。

在你的情况下

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

            revalidate: 10 // 10 seconds 

        };

    } catch (error) {

        res.statusCode = 404;

        return { props: {} };

    }

}

请注意该revalidate参数。

Answer 3

有一种方法可以更新使用 getStaticProps 生成的 HTML，这个过程称为增量服务器重新生成。这将确保您在将更新推送到博客文章时更新您的页面。NextJS 已经记录了这个 https://nextjs.org/docs/basic-features/data-fetching 您在上面的页面上搜索 ISR 以了解它是如何完成的 基本上您必须指定 NextJS 将尝试更新页面的时间，如果完全有新帖子，它将在第一次请求时由服务器呈现，并且然后缓存，一旦缓存，它几乎就像一个静态页面一样工作，参考后备：'blocking' 从网站引用：Next.js 允许您在构建网站后创建或更新静态页面。增量静态重新生成 (ISR) 使您能够在每个页面的基础上使用静态生成，而无需重建整个站点。使用 ISR，您可以在扩展到数百万页的同时保留静态的优势。

考虑我们之前的 getStaticProps 示例，但现在通过 revalidate 属性启用增量静态再生