Question

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

由于我是新手，因此几乎所有需要在渲染前从 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 不支持

Answer 2

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

Ans. getStaticProps 和 getStaticPaths 是 Incremental Static Generation 的不错选择，适用于您的案例，即电子商务应用。

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

回答。您可以在一段时间后再次预渲染产品页面。这是它的工作原理：

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.

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

中指定 getStaticProps: 60

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

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

供参考：

Next.js SSR 与 SSG

2 个答案: