Question

我阅读了 Next.js documentation 很多遍，但我仍然不知道使用 getStaticPropse 和 fallback:tru 的 getServerSideProps 之间有什么区别。

据我所知：

getStaticProps

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？

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

你们能否向我解释一下或指导我做一些可以帮助我完全理解这一点的事情？

Answer 1

考虑一个不运行 Javascript 的网络爬虫，当它访问一个不是在构建时构建的页面时，它的 fallback 设置为 true，Next.js 将服务您定义的页面的后备版本 (Fallback pages)。抓取工具可能会看到类似 <div>Loading</div> 的内容。

与此同时，如果抓取工具访问带有 getServerSideProps 的页面，Next.js 将始终以所有数据准备就绪的页面作为响应，因此抓取工具将始终获得该页面的完整版本。

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

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

Answer 2

fallback:true 在 getStaticPaths 中设置，它与 getStaticProps 一起使用以预生成动态页面。

getStaticPath 获取数据库以确定必须预生成的页面数量以及动态部分通常是博客的“slug”和产品的“id”。想象一下，您的页面有 1000 种产品，预生成每个页面需要很长时间。如果用户只是手动输入网址“yourDomain/products/100”。如果该页面未准备好，您将返回一个 Fallback 组件。

但是 getServerSideProps 在请求命中路由时被执行。使用 getStaticPaths 和 getStaticProps（如果您正在重新验证您有权访问请求），您将无法访问 request 对象。例如，您可能需要提取 cookie 并使用此 cookie 进行 api 调用。

否则，假设您有动态页面“users/[id]”，并且您在身份验证时在此处显示用户机密数据。如果您预生成此页面，则所有其他用户都可以看到每个页面。

getStaticProps + fallback:true 和 getServerSideProps 到底有什么不同？

2 个答案: