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

Question

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

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 使用 增量静态生成 解决了这个问题。有了这个，您的页面会不断更新，而无需重新部署您的应用程序。您只需告诉 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 页面将从缓存中获取