每次我返回同一页面时 getStaticProps 是否都会获取数据？

Question

我正在使用路线来获取页面 ex。page/[id].js并仅显示该 id 的数据。那么每次访问该页面时它都会重新获取数据吗？前任。通过此页面上的链接转到下一页，然后按返回返回此页面。就像在 React.js 中使用DidComponentMount它获取数据一样，每次安装时都会进行获取，即使您返回时已经访问过该页面。

export async function getStaticProps(context) {
    const res = await fetch(`https://.../data/${context.params.id}`)
    const data = await res.json()
    return {
        props: { data }
    }
}

Answer 1

getStaticProps我们的页面内部（而不是组件内部）告诉 next.js 当前页面将静态生成。中执行的代码getStaticProps不会包含在发送回客户端的代码包中。

getStatisProps在构建时预先生成页面的想法。这意味着所有HTML代码和数据都是提前准备好的。由于页面是预先构建的，因此当我们部署它们时，它们可以被服务器缓存，以便可以立即处理传入的请求。因此，当提供页面时，它们不是空的，而是预先填充了内容。

如果运行npm run build，访问.next/server/目录，您将看到预先生成的 HTML 文件。

如果数据频繁更改会发生什么情况。如果您正在构建完全静态的内容，那么预生成的页面非常有用。如果您要呈现数据不会更改的博客文章，那么预生成页面是个好主意。

每次将新数据添加到静态生成的页面时，为了看到更改，您必须再次重建项目。但 next.js 使用incremental static generation. 这样，您的页面就会不断更新，而无需重新部署您的应用程序。您只需告诉 next.js 您希望页面在每次请求最多 x 秒后预先生成。重新生成的页面将替换旧页面。因此，您可以持续预生成传入请求。为此，您只需添加revalidate属性：

export async function getStaticProps(context) {
      const res = await fetch(`https://.../data/${context.params.id}`)
      const data = await res.json()
      return {
        props: { data }
      },
      // time in seconds
      // this tells if last generated page was more than 60 seconds ago, pregenerate it
      revalidate: 60
    }

如果您不添加revalidate属性，您的预构建 HTML 页面将从缓存中提供