与 Guillermo Rauch 一起粉碎 Podcast 第 23 集：Next.js 是什么？

今天，我们谈论的是 Next.js。 它是什么，它在哪里适合我们的 Web 开发工作流程？ 我与共同创作者吉列尔莫·劳赫（Guillermo Rauch）进行了交谈以找出答案。

显示注释

• 吉列尔莫·劳赫在推特上
• Next.js

每周更新

• “掌握 React 中的 Props 和 PropTypes”
  大卫·阿德内耶
• “Bradbury Thompson 启发的设计决策：平面设计的艺术”
  通过安迪克拉克
• “使用 Flask、Google 的 Cloud SQL 和 App Engine 设置 API”
  通过 Wole Oyekanmi
• “离子反应中的形式和验证”
  通过杰里纳维
• “如何帮助您的客户通过设计获得更多反向链接”
  苏珊娜·斯卡卡

成绩单

Drew McLellan：他是 Vercel 的创始人兼首席执行官，Vercel 是一个适合 Jamstack 工作流程的静态站点云平台。 他也是 Next.js 的共同创建者。 他之前创立了 LearnBoost 和 CloudUp，并以创建 Socket.io、Mongoose 和 SlackIn 等几个流行的节点开源库而闻名。 在此之前，他是 MooTools 的核心开发人员，所以我们知道他对 JavaScript 了如指掌。 你知道他曾经收到西班牙国王的皇家委托，用卷心莴苣制作冰雕吗？ 我的好朋友，请欢迎 Guillermo Rauch。 嗨，吉列尔莫，你好吗？

Guillermo Rauch：我非常棒，谢谢你邀请我。

Drew：我今天想和你谈谈 Next.js 的整个世界，因为显然你个人对它非常了解，从一开始就作为共同创造者参与其中。 Next.js 是我在 Jamstack 领域工作时关注的那些项目名称之一，但它并不是我之前亲自看过或密切合作过的东西。 对于像我这样可能不知道 Next.js 是什么的人，也许你可以给我们一些背景知识，了解它是什么以及它试图解决什么问题。

Guillermo： Next.js 是 Jamstack 世界中一个非常有趣的成员，因为 Next.js 实际上开始成为一个完全专注于 SSR 的框架。 它开始在 Jamstack 领域之外得到大量采用，人们在构建非常大的东西时，特别是当他们想要拥有用户生成的内容或动态内容或社交网络或电子商务时，他们知道他们想要 SSR，因为他们的数据集是非常大或非常动态。 我认为 Jamstack 世界中的很多人都没有注意到它，但后来 Next.js 获得了静态优化的能力。

Guillermo：一方面，例如，如果您不使用 Next.js 在页面的顶层进行数据获取，那么您的 React 页面将是……顺便说一下，对于那些不完全了解的人， Next.js 只是用于生产的 React 框架，但具有执行某些渲染的能力。 然后，当您获得静态优化功能时，如果您不在页面的顶层定义数据获取，它会自动导出为 HTML，而不是尝试对服务器渲染做任何事情。

Guillermo：后来，它还获得了静态站点生成的能力，这意味着您可以定义一个特殊的数据挂钩，但该数据挂钩在构建时获取数据。 Next.js 成为了一个混合的、非常强大的动态和静态框架，现在它在 Jamstack 领域也有了很大的发展。

Drew：人们可能会说 React 已经是一个框架，你肯定听说过它是这样描述的。 成为 React 的框架实际上意味着什么？

Guillermo：这是一个很好的观察，因为我总是向人们指出，Facebook 上的 React 和 Facebook 之外的 React 是完全不同的野兽。 Facebook 的 React 实际上与服务器渲染一起使用，但即使是他们的服务器渲染，例如，也不使用 Node.js，它使用一个名为 Hermes 的高度专业化的虚拟机，它与他们的生产黑客和 PHP 堆栈和答案进行通信所有这些先进和异国情调的 Facebook 需要。

Guillermo：当他们开源 React 时，几乎就像开源一个组件一样。 我总是把它称为开源引擎，而不是给你汽车。 发生的事情是人们真的想带着它去开车，他们想用 React 去地方。 在社区中，人们开始创造汽车，他们将 React 作为引擎嵌入，这也是司机、开发人员首先追求的，让 React 成为汽车的基础部分。 Next.js、Gatsby 和 React Static 以及许多其他框架开始出现，它们解决了“我实际上想要创建完全加载的页面和应用程序”之类的需求。

Guillermo：虽然 React 更像是页面中特定小部件的组件和引擎，但 Facebook 肯定是这种情况。 他们会广泛公开地承认，他们发明它是为了通知批处理、聊天小部件、新闻提要组件等，这些组件是 React 路由，它们被嵌入到生产现有应用程序的内容中，包含大量代码行甚至其他 JS 库和框架。

Guillermo：为 React 创建一个框架意味着什么，这意味着你让 React 成为故事的基础部分，希望这是我们将尝试用 Next.js 做的事情，学习曲线主要是关于 React 的一些附加内容Next.js 的表面，尤其是在数据获取和路由方面。 我们也做了很多生产优化，所以当你得到 React 时，当你得到 Create React 应用程序时，有点像，我喜欢称它为 Facebook 给你的引导车，也许生产的需求并没有真正满足. 或者如果你尝试自己通过配置 Webpack 和配置 Babel 以及配置服务器渲染和静态生成来完成，那么从头开始组装汽车也很困难。 Next.js 将为您提供这个零配置以及围绕使用 React 构建整个大型事物的生产优化默认设置。

Drew：所以它几乎在你的 React 应用程序周围建立了一种生态系统，其中包含一组预配置的工具，使你能够——

吉列尔莫：正确。

Drew：立即着手进行静态站点生成或服务器渲染或路由。

Guillermo：正确，你在那里使用了一个非常非常关键的词，它是预先配置的。 作为 Next.js 的贡献者，我们有幸引起了 Google Chrome 的注意。 这个项目的领导者之一，她的事情是，当他们在谷歌内部开发框架时，他们面临着社区和开源今天面临的许多相同问题。 在如何扩展和制作开箱即用的真正高性能网络应用程序方面，谷歌有许多不同的竞争举措。

Guillermo：您将以 Google 员工的身份加入，您将获得一个框架，您可以使用该框架创建非常大的生产就绪、非常高性能的应用程序。 Shubie 是其中许多举措的一部分，她发现要使框架大规模成功有两个关键要素。 一个是预配置，这意味着您开始工作，您将要启动一个全新的应用程序，您应该得到一些已经准备就绪并满足当时已知的许多生产需求的东西及时。

Guillermo：另一方面，我们正在努力实现的另一个真正重要的步骤是一致性。 您可以获得最优化的生产就绪的预配置框架，但是如果您继续进行，例如，开始引入大量重度依赖项或第三方脚本，或者使用需要很长时间绘制的非常低效的布局等等依此类推，那么您将浪费这种预先配置。 随着时间的推移，通过混合预配置和一致性，开发人员不仅有一个很好的起点，而且随着时间的推移它也被引导到成功。

Drew：看起来 Next.js 的一个特点，就是它很自以为是，UI 层是 React，它使用类型脚本，使用 Webpack，这些都是项目做出的选择，这就是你得到的。 如果我错了，请纠正我，但你不能将 React 换成 Vue，例如在 Next.js 中。

Guillermo：这是一个很好的观点，技术决策符合某种艺术。 一方面，我真的很想说 Next 是非常无主见的，原因是如果你专门去 github.com/vercel/nextjs 和示例目录，你会发现几乎就像一个可以与 Next.js 一起使用的技术组合爆炸式增长。 你会看到 fire-based，你会看到 Graphic UL，你会看到 Apollo，你会看到 Redux，你会看到 MobX，在 CSS 空间里还有更多的选择。

Guillermo：我们有一个嵌入的默认 CSS 端口，但是您可以使用它的两种风格，一种带有导入，一种带有样式标签，我们称之为 Style JSX，它非常类似于 Shadow CSS 的 Web 平台方法。 我的意思是没有意见的原因是我们希望 Next.js 非常接近网络的“裸机”，而不是引入许多如果 10 年后的今天的网络将与之不兼容的原语。 然后，如果您查看示例，您会发现可以插入所有这些其他技术。

Guillermo：基本观点是有 React，你无法取代它，至少在短期内是这样。 然后是你应该可以创建页面的概念，这在我们刚推出时有点像一个新事物，每个人都在尝试创建单页面应用程序。 我们意识到，就像互联网是由具有大量页面的网站组成的，这些页面通过搜索引擎、Twitter、Facebook、社交网络、电子邮件同伴创建不同的入口点，就像你总是引导人们走向入口点一样，并且通过该入口点的那个人不应该下载整个应用程序的负担。

Guillermo：然后这条路径引导我们实现服务器渲染，然后为多个页面进行静态生成，等等等等。 另一个基本观点是 Next 应该是一个适用于 web 的框架，而不是反对 web。 然后最重要的是，React 缺少数据获取和路由原语，我们添加了这些。 有一定程度的意见需要处理，就像每个人都需要路由器一样，所以还不如默认内置一个路由器。

Drew：拥有这些默认值的最大优势是它消除了很多选择的复杂性，它就在那里，它已经配置好了，你可以开始使用它而无需考虑太多，因为我认为我们都已经-

吉列尔莫：没错。

德鲁：在使用什么组件有太多选择的情况下，这可能会让人不知所措，并妨碍工作效率。

吉列尔莫：没错。

Drew：您认为人们将 Next.js 用于哪些类型的项目？ 它基本上适用于您可能构建生产 React 应用程序的任何情况，还是更适合特定类型的内容繁重的网站？ 从这个意义上说重要吗？

Guillermo：是的，所以这是一个关于网络的古老争论，网络是应用程序，网络是网站，它是混合体吗？ JavaScript 等的作用是什么？ 很难给出一个直截了当的答案，但我对此的看法是，网络总是演变为内容的混合体，而这些内容正在演变为对用户来说越来越动态和个性化。 即使您说像内容网站，世界上的高端内容网站也拥有与应用程序非常相似的代码库。

Guillermo：这里有一个很好的例子，比如《纽约时报》，他们会为你提供带有数据分析工具和交互式动画的嵌入式小部件，他们会推荐接下来要阅读的故事，并且他们有一个内置的订阅模型，有时会给你部分内容，有时还会计算您阅读了多少篇文章。 就像我在网络发明时告诉你的那样，蒂姆·伯纳斯-李会说，“不，这太疯狂了，这在网络上是不可能的”，但这就是我们今天拥有的网络。

Guillermo： Next.js 正在满足很多这些复杂的现代需求，这意味着你会看到很多电子商务的使用，你会看到很多内容。 顺便说一下，电子商务的意思，不仅仅是购买商品，还包括网络上最大的房地产网站 realtor.com、zillow.com、trulio.com 等体验，整个类别都是 Next.js，然后是内容网站。 我们刚刚以 Vercel 和 Next.js 的客户身份加入了washingtonpost.com，然后我们有了第三个类别，它更加新兴但非常有趣，它是完整的应用程序和用户生成的内容，比如 tiktok.com，有点像你会认为原始的单页应用程序用例在那里也得到了很好的体现。

Guillermo： Next.js 在您需要大量内容且必须非常、非常快速地提供服务、必须进行 SEO 优化，并且归根结底是动态和静态的混合体时，会非常出色。

德鲁：我之前和马西·萨顿谈过盖茨比，这似乎是在类似的领域。 看到一个问题的解决方案不止一种，并且可以从一个项目到下一个项目进行选择，这总是很棒的。 你会说 Next.js 和 Gatsby 在同一种问题空间中运行，它们有多大相似或不同？

Guillermo：我认为某些用例存在重叠。 例如，我的个人博客 rauchg.com 在 Next.js 上运行，它也可能是一个很棒的 Gatsby 博客。 在较小的静态网站类型的空间中存在重叠，我并不是说不相关。 许多超级、超级重要的 dotcom 都在基本静态的网络上运行，所以这就是我认为 Jamstack 的美妙之处。 因为 Next.js 可以静态优化您的页面，然后您可以通过它获得出色的 Lighthouse 分数，您可以将它用于重叠的用例。

Guillermo：我认为当你开始进入更动态的需求并且你有很多页面时，这条线就会被划清，你需要一次更新它们。 尽管 Gatsby 正在为这些创建解决方案，但 Next.js 已经有生产就绪的实时解决方案，可以与任何类型的数据库、任何类型的数据后端一起使用，基本上可以“生成”或“打印”大量页面。 这就是今天客户使用 Next.js 而不是 Gatsby 的地方。

Drew：随着基于 JavaScript 的解决方案变得越来越大，每个人似乎都会遇到的问题之一是性能，以及事情如何开始变得非常缓慢，你有很大的包大小。 传统上，要正确配置代码拆分等事情可能相当复杂。 我看到这是 Next.js 的一大特色，它声称代码拆分是自动的。 Next.js 在代码拆分方面做了哪些工作？

Guillermo：你的观察是 100% 正确的。 网络上最重要的事情之一和网络上最大的权重之一是 JavaScript，就像不同的材料具有不同的密度和权重而与实际物理体积无关一样，JavaScript 往往是一个非常密集、沉重的元素。 即使是少量的 JavaScript 与例如可以在主线程之外异步处理的图像相比，JavaScript 也往往特别麻烦。

Guillermo： Next.js 投入了大量精力来自动优化你的包。 当我第一次想到 Next.js 的想法时，我的第一个直觉是你要定义，例如，10 条路线。 在 Next.js 世界中，您创建一个 pages 目录并将文件放入 Index.js、About.js、Settings.js、Dashboard.js、Termsofservice.js、Signup.js、Login.js。 这些成为您可以通过各种媒体共享的应用程序的入口点。

Guillermo：当您输入这些内容时，我们希望首先为您提供与该页面相关的 JS，然后可能是一个公共捆绑包，以便系统内的后续导航非常灵活。 Next.js 也非常非常好，它会自动预取连接到该入口点的其余页面，这样感觉就像一个单页应用程序。 很多人说，“如果我知道我可能有几条路线，为什么不直接使用 Create React 应用程序呢？” 我总是告诉他们，“看，你可以找到那些页面，因为 Next.js 会自动预取连接的那些，你最终会得到你的单页应用程序，但它在初始绘制方面得到了更好的优化，那个最初的切入点。”

Guillermo：那是最初的代码拆分方法，但随着时间的推移，它变得更加复杂。 谷歌提供了一个非常好的优化，称为 Module 和 No Module，它将为现代浏览器提供差异化​​的 JS，为其他浏览器提供大量多域的遗留 JS，并且这种优化 100% 自动化并产生大量节省。 我们把它交给了我们在 Vercel 上托管的一个客户，叫做 Parnaby's，我相信如果我没记错的话，这是非常非常重要的事情。 这可能节省了 30% 的代码大小，这仅仅是因为他们将 Next.js 升级到了更好地优化 JS 包的版本。

Guillermo：这就是我们之前讨论过的一点，那就是你选择 Next.js，随着时间的推移它只会变得更好、更优化，它会继续代表你优化事情。 老实说，这些都是您永远不必处理或打扰的预配置，以及您甚至不想做的研究。 好像我并没有很明显地参与其中，但我查看了一些内部讨论，他们正在讨论所有这些只对 Internet Explorer X 和 Soho 重要的多域，我想，“我什至不想知道，让我们升级 Next.js 并获得所有这些好处。”

Drew：坚持默认设置和最常见的配置有时会有很大的好处，这似乎真的是 Next.js 方法。 我记得当我在 2000 年代初开始编写 PHP 时，每个人都在使用 PHP 和 MySQL，当时我刚从 Windows 出来，所以我想使用 PHP 和 Microsoft Sequel Server。 你可以做到，但你一直在逆流而上。 然后，一旦我切换到 MySQL，整个生态系统就开始为我工作，我不需要考虑它。

吉列尔莫：是的，一切都只是点击，这是一个很棒的观察。 我们一直都看到，就像 Babel 生态系统现在如此强大一样，你可以通过将 Babel 换成其他东西来变得更快一些，但随后你就需要牺牲令人难以置信的生态系统兼容性。 这是你之前提到的性能问题，对于很多人来说，构建性能和静态生成性能是一个很大的瓶颈，这是我们在逐步提高工具性能方面非常努力的事情。

Guillermo：例如，Next.js 现在正在做的事情之一是将其默认值从 Webpack 4 升级到 Webpack 5，这有一些破坏性的东西，这就是为什么我们首先将它作为一种选择提供给人们-在标志中，但稍后它将成为默认值。 Webpack 5 取得了令人难以置信的性能改进，但我们并没有牺牲 Webpack 生态系统，而是逐步改进。 当然，有一些非常小的东西需要牺牲，但这是当今 JS 生态系统的一个令人难以置信的好处，我认为很多人都在掩饰，因为也许他们看到，“哦，我们本可以做到 X在 Soho 中，也许它会更快一点，或者在 Soho 中的 MPM 会花费更少的时间。” 他们抓住了一些细节，却错过了更大的图景，即生态系统价值巨大。

Drew：由 Next.js 之类的项目完成所有配置和维护以及它的另一面的价值，而不是通过交换使用其他东西来自己承担，这是令人难以置信的，因为一旦你离开这些默认值，您正在承担保持所有兼容性并自己完成的负担。 我对 Next.js 真正感兴趣的一件事是，有一些选项可用于进行静态站点生成或服务器端渲染，或者可能是两者的混合。 我认为在最近的更新中对此进行了一些更改，您能告诉我们一些关于这一点的信息以及您何时可以选择其中一个吗？

吉列尔莫：是的，当然。 这种混合方法与我之前描述的页面系统相结合的关键组件之一是，您可以拥有完全静态的页面或服务器呈现的页面。 完全静态的页面具有我称之为静态提升的令人难以置信的好处，即您可以获取该资产并自动将其放在边缘。 把它放在边缘，我的意思是你可以缓存它，你可以抢先缓存它，你可以复制它，你可以让它当请求进来时，它永远不会触及服务器，因为我们提前知道，“嘿，Slash Index 是静态的。”

Guillermo：当涉及到为全球观众服务时，这是一个非常非常有趣的好处。 您基本上可以获得开箱即用的自动 CDN，尤其是当您部署现代边缘网络（如 Vercel 或 AWS Amplify 或 Netlify 等）时。 Next.js 有个前提，能不能做成静态的，就应该是静态的。 当你第一次开始一个项目并且你正在处理你的第一页或者你正在踢框架的轮胎时，不妨让一切都是静态的。

Guillermo：即使对于高端需求，例如 vercel.com，我们自己对 Next.js 的使用也是完全静态的。 它是完全静态和静态站点生成的结合，所以我们所有的营销页面都是静态的，我们的博客是从动态数据源静态生成的，然后是我们的仪表板，其中包含大量动态数据，但我们可以将其作为外壳或骨架交付，与查看部署、查看项目、查看日志等相关的所有页面基本上都是带有客户端 JavaScript 的静态页面。

Guillermo：这对我们来说非常好，因为我们需要非常快速的第一窗格性能的所有内容都已经预渲染，需要 SEO 的所有内容都已经预渲染，以及非常动态的所有内容，我们只需要担心安全性，因为例如，从客户端的角度来看，它使用相同的 API 调用，例如，我们的 CLI 使用或我们的集成使用等等。 一个完全静态的网站，运行起来非常便宜，具有难以置信的可扩展性等等。

Guillermo：现在，我们的博客需要做的一件特别的事情是我们希望非常快速地更新数据。 我们希望非常快速地修复一个错字，而不是等待整个构建发生，这是 Next.js 的一个非常重要的好处，当您从静态跨越到动态时，它也会在解决方案之间为您提供这些. 对于我们的博客，我们使用了增量静态生成，因此本质上我们可以在底层内容发生变化时一次重建一个页面。

吉列尔莫：想象一下，我们不仅有几百篇博客文章，而且我们有很多博客文章一直在生成并一直在更新，就像我提到我们的一位客户华盛顿邮报一样，在这种情况下你需要离开更倾向于完整的 SSR，尤其是当您开始为每个用户自定义内容时。 我刚刚描述的复杂旅程从我有一个营销页面开始，到我有一个有几千页的博客，再到我有数万或数百万页。 这就是您可以在自己的业务中穿越的 Next.js 旅程。

Guillermo：然后你作为开发人员开始在可能更少的责任和更多的责任之间做出选择，因为当你选择使用 SSR 时，你现在在服务器上执行代码，你在云上执行代码，有更多的责任更多的权力。 您可以决定在哪里使用每种工具这一事实是我认为 Next 的一个非常非常有趣的好处。

Drew：就结合静态站点生成和服务器端渲染的实用性而言，这在服务器元素方面是如何工作的？ 您是否需要像 Vercel 这样的专用平台来实现这一目标，还是可以更直接、更简单地完成？

Guillermo： Next.js 为您提供了一个开发服务器，因此您下载 Next 并运行您的 Next Dev，这就是开发服务器。 开发服务器显然针对开发进行了令人难以置信的优化，就像它拥有 Facebook 发布的最新快速刷新技术一样……实际上，Facebook 并没有发布它，Facebook 在内部使用它来获得最佳、最高性能和最可靠的热模块替换，这样你基本上是在打字，它的变化会反映在屏幕上，这就是开发服务器。

Guillermo：然后 Next 为您提供了一个名为 Next Start 的生产服务器，Next Start 具有自托管框架的所有功能。 Vercel 的有趣之处在于，当您将 Next 部署到它时，它会自动优化，并且它是 100% 无服务器的，这意味着无需负责管理、扩展、兑现和兑现验证、清除、复制、全局故障转移等等。等等，当你自己运行 Next Start 时，你必须承担。

Guillermo：这也是 Next.js 的巨大好处，例如，apple.com 在 Next.js 上具有几个不同的属性、子域和 dotcom 页面，它们自托管，这是由于非常非常先进和严格的安全和隐私需求. 另一方面，washingtonpost.com 使用 Vercel，因此我们拥有如此广泛的用户，我们非常乐意为所有用户提供支持。 在我看来，无服务器的发展方向的好处是，它可以为您提供两全其美的最佳性能，随着时间的推移只会变得更好，最好的开发人员体验就像，“嘿，我没有担心任何类型的基础设施。”

Drew： Next.js 是一个开源项目，由 Vercel 的团队开发。 Vercel 之外还有其他贡献者吗？

Guillermo：是的，所以谷歌浏览器是主动提交服务器 PR 的主要浏览器，它帮助我们优化并与合作伙伴一起测试它，比如已经是谷歌生态系统一部分的非常大的 Next.js 用户，例如，由于使用了很多和许多应用程序，因此他们需要作为合作伙伴密切参与。 Facebook，我们与 Facebook 团队保持着良好的关系。 例如，快速刷新，我们是第一个实现该功能的 React 框架，它们帮助指导我们了解他们在 Facebook 使用 React 和快速刷新所学到的所有知识。

Guillermo：我们与许多合作伙伴合作，这些合作伙伴在野外部署了大量 Next.js 应用程序，来自各种不同类型的用例，比如想象电子商务和内容。 然后有很多独立贡献者，个人使用 Next.js 的人，还有教育工作者和大公司前端基础架构团队的成员。 这是一个非常非常广泛的社区努力。

Drew：听起来有人可能会担心，这是 Vercel 正在开发的重要部分，他们可能会担心他们会被锁定在特定平台上的部署，但听起来很像根本不是这样，他们可以开发一个站点并将其部署在 Firebase 或 Netlify 或……

吉列尔莫：是的，当然。 我喜欢在某种程度上将它与前端时代的 Kubernetes 进行比较，因为归根结底，我坚信……几乎每个人在需要运行 Linux 进程时都需要 Kubernetes ，就像您在谈论自以为是并且您说这是一项很好的技术，它非常不自以为是，但是我们有点忘记了一些自以为是。 就像在一天结束时，它源于运行打包为容器的特定 Linux 程序恶魔。

Guillermo： Next 处于类似的位置，因为我们将世界的通用原语视为 React 组件，显然这是固执己见，但我们确实认为，对于很多企业来说，就像他们都倾向于 Linux 一样，我们是在 React 和 Vue 上看到同样的事情，但幸运的是 Vue 也有 Nuxt，这是一个非常棒的解决方案，它在构思和原则上与 Next 相当。 我们倾向于像 Next.js、Nuxt 和 Svelte 生态系统的 Sapper 这样的平台。

Guillermo：我认为这些应该是开放平台，因为如果每个人都需要这个，还不如重新发明整个行业的轮子，对吧？ 我们非常欢迎这个职位，我们欢迎人们部署它，重新配置它，重建它，重新分配它等等。

Drew：就在最近发布了一个新版本的 Next.js，我认为是 9.5 版。 该版本有哪些重大变化？

Guillermo：最棒的是，正如我之前所说，很多事情开始是静态的，然后随着事情的发展变得更加动态。 顺便说一句，这是 WordPress 的冒险。 WordPress 一开始是基于静态文件数据库的方法，然后发展到需要数据库，有点像你描述的 PHP 是如何演变成越来越多的 MySQL 的。 Next.js 9.5 的优点在于它使增量静态生成成为生产就绪功能，因此我们将其从不稳定标志中删除。

Guillermo：这个特性让你可以在不放弃所有静态优势的情况下完成从静态到动态的旅程，也不必为服务器渲染的动态而全力以赴，因此它延长了你的静态的有用生命周期。 例如，我们在 Vercel 使用它的方式，就像我提到的，就像我们的博客在构建时完全预渲染，但是例如，我们实际上将在几分钟内发布一个重大公告，以及何时我们发布关于它的博客，我们希望能够对其进行调整、修复、预览等等，而不必在每次更改一篇博文的一个字母时发布 5 到 10 分钟的构建。

Guillermo：通过增量静态生成，您可以一次重建一个页面。 取决于您的网站有多大，可能需要几分钟甚至几秒钟的时间，现在只需要几毫秒。 同样，您不必放弃静态的任何好处。 这可能是我最兴奋的事情，它在 Next.js 9.5 上变得稳定了，特别是因为 JS 社区和 React 社区以及框架社区和静态站点生成社区一直在谈论这个为它制作静态增量的独角兽a long time, so the fact that Next.js did it, it's being used in production and it's there for everybody to use, I think it's a major, major, major milestone.

Guillermo: There's lots of little DX benefits. One that's really nice in my opinion is Next.js, as I said, has a page system. You would argue, “Okay, so let's say that I'm uber.com and I've decided to migrate on Next.js, do I need to migrate every URL inside over to Next.js in order to go live?” This has become a pretty important concern for us, because lots of people choose Next.js, but they already are running big things, so how do you reconcile the two?

Guillermo: One of the things that Next.js allows you to do in 9.5 is you can say, “I want to handle all new pages that I created with Next.js with Next.js, and the rest I want to hand off to a legacy system.” That allows you incremental, incremental is the keyword here today, incremental adoption of Next.js. You can sort of begin to strangle your legacy application with your Next.js optimized application one page at a time, when you deploy and you introduce in your Next.js page, it gets handled by Next. If it doesn't match the Next.js routing system, it goes to the legacy system.

Drew: That sounds incredibly powerful, and the incremental rendering piece of that, I can think of several projects immediately that would really benefit that have maybe 30-minute build times for fixing a typo, as you say. That sort of technology is a big change.

Guillermo: We talked to one of the largest, I believe, use cases in Jamstack in the wild, and it was basically a documentation website and their build times were 40 minutes. We're doing a lot in this space, by the way, like we're making pre-rendering a lot faster as well. One of my intuitions for years to come is that as platforms get better, as the primitives get better, as the build pipelines get better we're going to continue to extend the useful lifetime of statics. Like what ended up taking 40 minutes is going to take four.

Guillermo: A great example is we're rolling out an incremental build cache, as well, system. I sort of pre-announced it on Twitter the other day, we're already seeing 5.5 times faster incremental builds. One of the things that I like about Jamstack is that the core tenet is pre-render as much as possible. I do think that's extremely valuable, because when you're pre-rendering you're not rendering just in time at runtime. Like what otherwise the visitor would incur in in terms of rendering costs on the server gets transferred to build time.

Guillermo: One of the most exciting things that's coming to Next is that without you doing anything as well, the build process is also getting faster. On the Vercel side, we're also taking advantage of some new cloud technology to make pre-rendering a lot faster as well. I think we're always going to live in this hybrid world, but as technology gets better, build times will get better, pre-rendering will get better and faster, and then you'll have more and more opportunities to do kind of a mix of the two.

Drew: Sounds like there's some really exciting things coming in the future for Next.js. Is there anything else we should know before we sort of go away and get started working with Next.js?

Guillermo: Yeah. I think for a lot of people for whom this is new, you can go to nextjs.org/learn, it'll walk you through building your first small static site with Next.js, and then it'll walk you through the journey of adding more and more complexity over time, so it's a really fun tutorial. I recommend also staying tuned for our announcement that I was just starting to share on twitter.com/vercel, where we share a lot of Next.js news. Specifically we highlight a lot of the work that's being done on our open source projects and our community projects and so on. For myself as well, twitter.com/rauchg if you want to stay on top of our thoughts on the ecosystem.

Drew: I've been learning all about Next.js today, what have you been learning about lately, Guillermo?

Guillermo: As a random tangent that I've been learning about, I decided to study more economics, so I've been really concerned with like what is the next big thing that's coming in terms of enabling people at scale to live better lives. I think we're going through a transition period, especially in the US, of noticing that a lot of the institutions that people were “banking on”, like the education system, like the healthcare system, a lot of those, like where you live and whether you're going to own a house or rent and things like that, a lot of these things are changing, they have changed rapidly, and people have lost their compass.

Guillermo: Things like, “Oh, should I go to college? Should I get a student loan?” and things like that, and there is a case to be made for capitalism 3.0, and there is a case to be made for next level of evolution in social and economic systems. I've been just trying to expand my horizons in learning a lot more about what could be next, no pun intended. I've found there's lots of great materials and lots of great books. A lot of people have been thinking about this problem, and there is lots of interesting solutions in the making.

德鲁：这很有趣。 If you, dear listener, would like to hear more from Guillermo, you can find him on Twitter at @RauchG, and you can find more about Next.js and keep up to date with everything that goes on in that space at nextjs.org. Thanks for joining us today, Guillermo. 你有什么离别词吗？

Guillermo: No, thank you for having me.