Next.js SSR vs. SSG

Question

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

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

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

非常感谢您的所有回答。

Answer 1

1. 对于这种情况，getStaticProps 和 getStaticPaths 是一个不错的选择吗？

Ans. getStaticProps 和 getStaticPaths 是一个不错的选择，Incremental Static Generation 适合您的情况，即电子商务应用程序。

2.产品数据会随着每次页面浏览而更新吗？

Ans. 您可以在一段时间后再次预渲染产品页面。运作方式如下：

1. Next.js can define a "timeout" for this page — let’s set it at 60 seconds.
2. The data for product Y is updated.
3. When the page for product Y is requested, the user will see the existing (out of date) page.
4. When another request comes in 60 seconds after the previous request, the user will see the existing (out of date) page. In the background, Next.js pre-renders this page again.
5. Once the pre-rendering has finished, Next.js will serve the updated page for product Y.

这种方法称为增量静态再生。要启用此功能，您可以在 getStaticProps

中指定 revalidate: 60

3. 在哪里部署 nextjs 应用程序？

Ans. Next.js 可以部署到任何支持 Node.js 的托管服务提供商，当然还有用于存储产品数据和其他 CRUD 操作的数据库。

供参考：

Answer 2

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

With Static Generation (SSG) HTML 是在构建时生成的，将在每次请求时重复使用，TTFB 较慢，页面通常较快，但是每次更新数据都需要重新构建你的应用程序（博客可以接受，但电子商务不行）。

使用增量静态重新生成 (ISG) 静态内容也可以是动态的，页面将在后台使用基于间隔的 HTTP 请求重建。您可以使用 getStaticProps 中的 revalidate key 指定页面的更新频率，这对 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, that means that if your pages have no visits for 1 year, even if your revalidate time is 1 second, the first user after 1 year will see 1 year old data so technically users will not always see updated data. See 有关更多信息和资源的按需重新验证。

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

Next.js SSR vs. SSG

Next.js SSR vs. SSG

e-commerce

reactjs

server-side-rendering

next.js