页面内部的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页面