【问题标题】:When exactly is Next.js “build-time” happening?Next.js 的“构建时间”究竟是什么时候发生的?
【发布时间】:2021-02-07 17:06:41
【问题描述】:

我正在阅读 Next.js 获取数据部分的文档,我想到了一个问题。

Next.js 可以通过getStaticPropsgetStaticPathsgetInitialPropsgetServerSideProps 获取数据,对吧?

但正如我所引用的,有些发生在构建时:

getStaticProps(静态生成):在构建时获取数据

这个构建时间是什么时候发生的?

是在我们运行npm run build 的时候吗? (构建生产版本)

或者当用户访问我们的 Next.js 应用程序时? (根据每个请求)

【问题讨论】:

    标签: reactjs next.js


    【解决方案1】:

    构建时间发生在您构建用于生产的应用程序 (next build) 时。运行时发生在应用在生产中运行时 (next start)。

    getInitialProps (gIP) 在运行时针对每个页面请求在客户端和服务器上运行。最常见的用例是在请求的页面加载之前检索某种共享数据(例如让客户端和服务器知道用户是否正在导航到特定页面的会话)。这总是在 getServerSideProps 之前运行。虽然从技术上不鼓励使用它,但有时绝对有必要在客户端和服务器上执行一些逻辑。

    getServerSideProps (gSSP) 仅在运行时针对每个页面请求在服务器上运行。最常见的用例是在页面加载之前从数据库中检索最新的、特定于页面的数据(如产品的定价和显示库存量)。当您希望页面进行搜索引擎优化 (SEO) 时,这一点很重要,其中搜索引擎索引最新的站点数据(我们不希望我们的产品显示“有货 - 100 单位”,当它实际上是一个已停产的产品!)。

    getStaticProps (gSProps) 仅在构建时运行(有点)。这对于数据和页面不经常更新的网站非常有用。这种方法的优点是页面是静态生成的,因此如果用户请求该页面,他们将下载一个已将动态数据烘焙到其中的优化页面。最常见的用例是博客或某种可能不会经常更改的大型购物目录。

    getStaticPaths (gSPaths) 仅在构建时运行(有点)。它非常适合预渲染需要在构建时使用动态数据的类似路径(如/blog/:id)。当与 gSProps 结合使用时,它会从数据库/平面文件/某种数据结构中生成动态页面,然后 Next 可以对其进行静态服务。一个示例用例是一个博客,其中包含许多博客文章,它们共享相同的页面布局和相似的页面 URL 结构,但需要在构建应用程序时将内容动态烘焙到页面中。

    为什么 gSProps 和 gSPaths 在构建时运行?好吧,Next 引入了 revalidatefallback 选项,允许这两个方法在运行时在几秒钟内超时后运行。如果您希望静态重新生成页面,这很有用,但它应该只每 n 秒重新生成一次。优点是页面在导航到时不需要请求动态数据,但缺点是页面最初可能会显示陈旧数据。在用户访问该页面(触发重新验证)之前,该页面也不会重新生成,然后同一用户(或另一个用户)请求同一页面以查看其最新版本。这不可避免地会导致用户 A 看到陈旧的数据,而用户 B 看到准确的数据。对于某些应用来说,这没什么大不了的,而对于其他应用来说,这是不可接受的。

    最后,还有客户端渲染/请求 (CSR),它是客户端在运行时请求的资产,对 SEO 而言并不重要。最常见的用例是用户特定的仪表板页面,该页面仅与该用户相关,因此不需要被搜索引擎索引。

    其他注意事项:gIP 和 gSSP 是渲染阻塞。意思是,在他们的代码解析/返回道具之前,页面不会加载。这具有在页面加载之前显示空白页面的不可避免的后果。这也意味着页面响应时间变慢,其中:请求页面,gIP/gSSP 运行阻止页面加载的代码,gIP/gSSP 代码解析,然后下载资产,页面开始在客户端上加载 JavaScript,同时正在加载 HTML进入 DOM,JavaScript 运行完毕,页面重新水化,然后变成交互式的。

    【讨论】:

    • 感谢这份完整的指南!还有一个问题。因此,例如,如果我有一个博客并使用 gSPaths(例如 1、2、3)检索所有帖子 ID,并且我使用 Id 4 创建了一个新帖子,我必须创建一个新的生产版本来更新博客那个新帖子?
    • 如果您将revalidatefallback 一起使用,则否;否则,是的,那么你必须重建。
    • 哇,NextJS 太强大了。感谢您帮助我更多地了解这个框架!
    • 是和不是。如果您将 gSPaths 和 gsProps 与 revalidate 一起使用,则不需要,您不需要手动重建。否则,是的。 gSPaths 的主要目的是在 buildtime 期间解析来自 API 的未知路径。如果没有 gSProps,就无法在 运行时 期间从 API 检索新数据。当一起使用时,它们会在运行时逐步构建静态页面。将来,他们能够实现用户无需获取页面即可重新验证的功能;相反,当 API 中的数据发生变化时,页面将被重建。
    • @MattCarlotta 我感到困惑的是,当 api/database 没有数据时(通常在第一次部署时的情况),您将在第一次构建时使用数据库中的哪些数据,因为数据是在部署时添加的从前端
    猜你喜欢
    • 1970-01-01
    • 2019-10-17
    • 2012-10-01
    • 2011-08-19
    • 1970-01-01
    • 2020-05-28
    • 2014-03-22
    • 2016-10-11
    • 1970-01-01
    相关资源
    最近更新 更多