Next.js SSR 与 SSG

Question

我正在开发一个带有许多页面的Next.js 电子商务应用程序，其中一些是所有产品页面、特定产品页面、博客文章页面、个人资料页面、购物车页面等等。这个应用程序需要强大的 SEO，因此我选择了 Next.js，但是，我对其数据获取选项 - SSR 和 SSG没有太多经验。我在 Next.js 中阅读了很多关于 SSR 和 SSG 的文章，但我不确定我是否理解正确。

由于我是新手，因此我选择了getServerSideProps几乎所有需要在渲染之前从 RESTful API 加载内容的页面。然而，我发现一篇文章指出，产品页面的最佳选择是与withgetStaticProps一起使用，并在某个页面尚未预渲染时渲染加载指示器。然而，我的应用程序经常更改数据，数据库包含超过 10k 个产品，这些产品正在定期删除、编辑或添加。我的第一个问题是，在这种情况下，和是否是一个好的选择。产品数据会随着每次页面浏览而更新吗？或者我需要SSR吗？客户始终需要查看产品的最新更新。同样的问题也适用于所有产品页面，因为它应该只显示当前可用的产品，并在缺货时立即隐藏它们。getStaticPathsfallback = truegetStaticPropsgetStaticPaths

我的第二个问题是关于部署的。据我所知，如果应用程序是静态构建和导出的，则可以将其部署到静态/共享托管。但是，如果我在应用程序中使用 SSR，据我所知，我必须使用虚拟服务器来托管应用程序。根据第一个问题，托管此类应用程序有哪些选项？

非常感谢您的所有回答。

Answer 1

使用getServerSideProps (SSR)，数据是在请求时获取的，因此您的页面将具有更高的第一个字节时间 (TTFB)，但始终会使用新数据预渲染页面。

使用静态生成 （SSG），HTML 在构建时生成，并将在每个请求中重用，TTFB 较慢，页面通常更快，但每次更新数据时都需要重建应用程序（对于博客，但不适用于电子商务）。

通过增量静态重新生成(ISG)，静态内容也可以是动态的，页面将通过基于间隔的 HTTP 请求在后台重建。revalidate key您可以使用inside指定页面更新的频率 getStaticProps，这非常适合fallback : true并允许您（几乎）始终更新内容：

function Blog({ posts }) {
  const { isFallback } = useRouter(); // if true show loading indicator

  return (
    // your page content
  )

}

export async function getStaticPaths() {
  return {
    // no pages are generated at build time
    paths: [],
    // Enabling statically generating all pages
    fallback: true,
  }
}

// This function gets called at build time on server-side.
// It may be called again, on a serverless function, if
// revalidation is enabled and a new request comes in
export async function getStaticProps() {
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  return {
    props: {
      posts,
    },
    // Next.js will attempt to re-generate the page:
    // - When a request comes in
    // - At most once every second
    revalidate: 1, // In seconds
  }
}

export default Blog

注意事项：ISG 的灵感来自 stale-while-revalidate，这意味着如果您的页面 1 年没有访问，即使您的重新验证时间为 1 秒，1 年后的第一个用户也会看到 1 年前的数据，因此从技术上讲，用户将并不总是看到更新的数据。请参阅我关于按需重新验证的答案以获取更多信息和资源。

next export允许您在服务器上没有节点环境的情况下提供网站服务（它生成静态文件），请参阅此，但 ISG 和 SSR 不支持