reactjs - Next.js SSR 与 SSG

Question

我正在开发一个 Next.js 电子商务 应用程序，其中包含许多页面，其中一些是所有产品页面、特定产品页面、博客文章页面、个人资料页面、购物车页面等等。这个应用程序需要强大的 SEO，因此我选择了 Next.js，但是，我对它的数据获取选项 - SSR 和 SSG 没有太多经验。我在 Next.js 中阅读了很多关于 SSR 和 SSG 的文章，但我不确定我是否理解正确。
因为我是新手，所以我为几乎所有需要在渲染前从 RESTful API 加载内容的页面都选择了 getServerSideProps。但是，我看到一篇文章指出，产品页面的最佳选择是将 getStaticProps 与 getStaticPaths 与 fallback = true 一起使用，并在某个页面尚未预呈现时呈现加载指示器。然而，我的应用程序经常更改数据，数据库包含超过 10k 的产品，这些产品正在被定期删除、编辑或添加。我的第一个问题是，在这种情况下，getStaticProps 和 getStaticPaths 是否是一个不错的选择。 产品数据会随着每次页面浏览而更新吗？ 或者我需要 SSR 吗？ 客户始终需要查看产品 的最新更新。同样的问题也适用于所有产品页面，因为它应该只显示当前可用的产品，并在缺货时立即隐藏它们。
我的第二个问题是关于部署的。我知道如果应用程序是静态构建和导出的，它可以部署到静态/共享主机。但是，如果我在我的应用程序中使用 SSR，就我所知，我必须使用虚拟服务器来托管应用程序。根据第一个问题，托管此类应用程序有哪些选项？
非常感谢您的所有回答。

Answer 1

使用 getServerSideProps (SSR) 数据在请求时获取，因此您的页面将具有更高的第一个字节时间 (TTFB)，但将始终使用新数据预渲染页面。
使用 静态生成 (SSG) HTML 在构建时生成，每次请求都会重用，TTFB 速度较慢，页面通常更快，但每次数据更新时都需要重新构建应用程序(可以接受用于博客，但不适用于电子商务)。
增量静态再生 (ISG) 静态内容也可以是动态的，页面将在后台使用基于间隔的 HTTP 请求重建。
您可以在 revalidate key 中指定使用 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 年的数据，因此从技术上讲，用户不会总是看到更新的数据。有关更多信息和资源，请参阅关于按需重新验证的 my answer。 next export 允许您在服务器上没有节点环境的情况下为网站提供服务(它生成静态文件)，请参阅 this ，但 ISG 和 SSR 不支持