Next.js SSR与SSG

Question

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

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

我的第二个问题是关于部署。我知道，如果应用程序是静态构建和导出的，它可以部署到静态/共享主机。然而，如果我在我的应用程序中使用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的灵感来源于陈腐-同时-重新验证，这意味着如果您的页面在一年内没有访问，即使重新验证时间为1秒，1年后的第一个用户将看到1年前的数据，因此在技术上用户不会总是看到更新的数据。有关按需重新验证的更多信息和资源，请参见我的回答。

next export允许您在服务器上没有节点环境(它生成静态文件)的情况下为网站服务，请参阅这，但不受ISG和SSR的支持。

Answer 2

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.

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

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

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

供参考：

1. https://vercel.com/blog/nextjs-server-side-rendering-vs-static-generation
2. https://nextjs.org/learn/basics/deploying-nextjs-app/other-hosting-options