如何在 nextjs 的预渲染静态生成页面中获取更改的数据

Posted

技术标签:

【中文标题】如何在 nextjs 的预渲染静态生成页面中获取更改的数据【英文标题】:How to fetch changed data in pre-rendered static generated page in nextjs 【发布时间】:2020-08-06 16:57:34 【问题描述】:

如果我使用 nextjs 预渲染静态生成页面,那么未来更改的数据呢? 假设我使用电子商务产品详细信息页面或假设我将此静态生成用于博客文章。如果明天产品价格将发生变化或博客文章将被编辑,那么如何获取此更新数据。我应该再次在服务器中构建项目吗?

浏览 nextjs 文档,我发现有一些可用的渲染类型 -

    预渲染静态生成
      没有外部数据的静态生成 使用外部数据进行静态生成。这里在构建时使用了一些外部 api 来获取数据
    服务器端渲染。

在我上面的问题中,我谈到了第 1.2 点中提到的方式,我问如果数据会在构建后更改,那么如何获取它。

是否有可能在不重新构建服务器的应用程序的情况下获取更新的数据?

我害怕使用第 2 点,因为它可能会更慢。我认为我目前的纯反应应用程序比这种方式更快。

【问题讨论】:

【参考方案1】:

如果您的应用程序具有不断变化/动态的数据,我建议您使用 CSR(客户端渲染)。查看 useSWR。

对于您的用例,如果您真的想利用 Next.js 的强大功能,您可以选择 SSG(预渲染)您的产品列表页面,然后选择 CSR 或 s-s-r 您的产品详细信息页面。

未来的增量构建应该可以解决这个问题。

【讨论】:

如果我在这种情况下使用预渲染,那么何时更改数据如何获取它。我应该在服务器中重新构建项目吗?

以上是关于如何在 nextjs 的预渲染静态生成页面中获取更改的数据的主要内容,如果未能解决你的问题,请参考以下文章

鱼和熊掌兼得:Next.js 混合渲染

无法在 NextJs + Storybook 中提供静态文件

创建新的预渲染进程时出错(自动获取行)

在 NEXTJS 的 getServerSideProps() 中获取一些 html 表单数据(或对象)

使用 nextjs 渲染 html 页面的特定部分

是否可以根据用户代理(设备类型)在 vercel 上使用 nextjs 提供不同版本的静态页面?