getStaticProps + Fallback:true 和 getServerSideProps 之间到底有什么不同？

Question

我多次阅读Next.js 文档，但我仍然不知道getStaticProps使用fallback:true 和getServerSideProps.

据我所理解 ：

获取静态属性

getStaticProps在构建时呈现，并将任何请求作为静态 HTML 文件提供。它与不经常更新的页面一起使用，例如“关于我们”页面。

export async function getStaticPaths() {

return {
    paths: [{ params: { id: '1' } }, { params: { id: '2' } }]
  }
}

但是如果我们放在fallback:true函数的返回处，并且有一个对构建时未生成的页面的请求，Next.js 会将该页面生成为静态页面，然后该页面上的其他请求将作为静态页面静止的。

export async function getStaticPaths() {

return {
    paths: [{ params: { id: '1' } }, { params: { id: '2' } }],
    fallback: true,
  }
}

所以，getStaticProps's这个概念对我来说非常有效。我认为它可以适用于大多数场景。但如果getStaticProps效果很好，那我们为什么需要呢getServerSideProps？

据我所知，如果我们使用 .Next.js 将预渲染每个请求getServerSideProps。但为什么我们需要它，当我们可以用来getStaticProps获取最新数据时，我认为这对 TTPB 更好？

你们能给我解释一下或者指导我一些可以帮助我完全理解这一点的东西吗？

Answer 1

考虑一个不运行 Javascript 的网络爬虫，当它访问不是在构建时构建的页面并且其fallback设置为 时true，Next.js将提供您定义的页面的后备版本（后备页面）。爬虫可能会看到类似的东西<div>Loading</div>。

同时，如果爬虫访问带有 , 的页面getServerSideProps，Next.js将始终响应一个已准备好所有数据的页面，因此爬虫将始终获得该页面的完整版本。

从用户的角度来看，差异并不显着。事实上，具有getStaticProps和的页面fallback: true甚至可能会带来更好的感知性能。

此外，随着越来越多的爬虫在索引 JavaScript 之前执行 JavaScript，我预计将来使用的理由会更少getServerSideProps。