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

Question

我正在使用路由获取页面 ex。 page/[id].js 并仅显示该 ID 的数据。那么每次访问这个页面都会重新获取数据吗？前任。通过此页面上的 link 转到下一页，然后按返回返回此页面。就像发生在 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 文件。

如果数据经常变化会发生什么。如果您正在构建完全静态的内容，则预生成的页面非常有用。如果您正在渲染一个数据不变的博客 post，那么预生成页面是个好主意。

每次向静态生成的页面添加新数据时，为了看到更改，您必须再次重建项目。但是 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 页面将从缓存中提供

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

Does getStaticProps fetch data every time I get back same page?

reactjs

server-side-rendering

next.js