为什么开发人员应该再给 Next.js App Router 一次机会

领取优惠
Vercel 副总裁 Tom Occhino 讨论了开发人员为什么应该再给 App Router 一次机会以及 React 和 Next.js 之间的密切关系。

Next.js 框架的 App Router 于 2022 年首次亮相，但直到去年才被标记为前端开发的稳定版本。它最终将成为 Pages Router 的替代品，但并不是所有人都对 App Router 感到满意。

一名开发人员在GitHub 讨论帖中写道： “App Router 只是Vercel团队创造的一堆烂摊子。我刚刚在一个项目中使用过它，每次客户端或服务器组件都让人感到困惑。”

Vercel 框架工程副总裁Tom Occhino理解这些批评，但他告诉 The New Stack，开发人员应该再给它一次机会了。

Next.js 应用路由器引入了一种使用 React 服务器组件、使用 Suspense 进行流式传输和服务器操作构建应用程序的新模型。它采用了路由、数据获取和缓存的新方法。不过，它还是让一些开发人员感到失望。有人抱怨应用路由器的文档和复杂性，而且它还没有准备好投入生产。

“我实话实说。我加入 Vercel 才 18 个月多一点，”Occhino 说道。“我第一次使用 App Router 时，对它并不满意。我有几个抱怨。”

首先，Next.js 团队低估了它与 Pages Router 之间的区别，他说。

他说：“[App] Router 是 Next.js 的重写版，当团队发布它时，它还没有真正完成。”

如果 Vercel 没有这么早就将 App Router 设为默认设置，那么这可能就不成问题了。他承认，回想起来，最好等到应用路由器“毫无疑问比页面路由器好”时再这么做。

“我最大的抱怨是，我们还没有准备好改变默认设置，”他说。“我们当然准备好与世界分享并让人们尝试，但我们还没有准备好改变默认设置。”

在上个月于旧金山举行的 Next.js 大会上，Occhino 鼓励那些不喜欢 App Router 第一版的人今天再试一次。

“现在我确实认为——尤其是我们的新代码模块可以帮助您非常轻松地从 Next.js 的旧版本升级到这个版本——我确实认为是时候重新审视它了，我认为他们会非常印象深刻，”他说。

Next.js 15 中的应用路由器

应用路由器在 Next.js 15 中得到了改进。Next.js 15带来的变化包括：

• 更改缓存默认值。Next.js App Router 推出了固定的缓存默认值，Vercel 表示，这些默认值旨在默认提供性能最高的选项，并可在需要时选择退出。但根据反馈，Next.js 团队“重新评估了我们的缓存启发式方法以及它们如何与部分预渲染 (PPR) 等项目以及使用 fetch 的第三方库进行交互。”在 Next.js 15 中，他们将 GET 路由处理程序和客户端路由器缓存的缓存默认值从默认缓存更改为默认不缓存。

• React 18与 Pages Router 的向后兼容性。在版本 15 中，App Router 使用 React 19 RC。根据社区反馈，Vercel 引入了 React 18 与 Pages Router 的向后兼容性。“如果您正在使用 Pages Router，这允许您在准备就绪时升级到 React 19，”该团队写道。“虽然 React 19 仍处于 RC 阶段，但我们在实际应用程序中进行的广泛测试以及与 React 团队的密切合作让我们对其稳定性充满信心。核心重大更改已经过充分测试，不会影响现有的 App Router 用户。因此，我们决定现在发布 Next.js 15 作为稳定版本，以便您的项目为 React 19 GA 做好充分准备。”

• 静态生成速度更快。该团队写道：“App Router 的静态生成速度现在明显更快，尤其是对于网络请求较慢的页面而言。”“这是通过重复使用初始渲染进行数据生成和 HTML 渲染来实现的，无需进行第二次渲染。”他们补充说，静态生成已得到优化，可以缩短构建时间，尤其是对于网络请求较慢的页面而言。

Next.js 和 React 之间的关系

我们还向 Occhino 询问了 React 和 Vercel 的 Next.js 之间的紧密联系。在加入 Vercel 之前，他曾负责Facebook 的 React 团队。

React Core 团队目前有21 名成员。其中主要是 Meta 工程师，这很合理，因为 Facebook 创建了 React。但 Vercel 工程师中也有四名，这使得这家前端云提供商成为 React 团队中第二大且几乎是唯一一家其他公司。前 Meta 员工、现就职于社交媒体网站 Bluesky 的 Dan Abramov 是 React Core 中唯一一位 Meta 和 Vercel 之外的工程师。

“App Router 是 Next.js 的重写版。”      ——Vercel 工程、框架副总裁 Tom Occhino

奥奇诺指出，这对开源行业来说是一个新情况。

“开源通常以两种方式运作：由一家公司开发并由该公司维护和投资；或者由一个没有相关业务的社区开发，之后可能会有一家企业加入其中，也可能不会，”他说。

但对于 React，Meta/Facebook 在 React 上投入了大量资金，现在 Vercel 也有专门的员工不仅致力于 Next.js，还致力于 React 本身。这创造了 Occhino 所说的“Next.js 和 React 之间非常高的内聚力”。

React 最初由 Facebook 驱动

Ochino 表示，React 诞生于 Facebook 的基础设施背景下，其设计目的实际上只是为了提供 Facebook 产品。

他以一名刚毕业的软件工程师的身份创立了 Facebook，负责开发面向用户的产品。后来，他开始在 Facebook 开发开发者工具。Facebook 开发的其中一个工具就是 React，它已开源，可供更广泛的使用。

“React 并不是像你所说的那样‘包含所有功能’，”Occhino 告诉 The New Stack。“我们甚至称它为一个库。我们没有称它为一个框架。”

他说，Facebook 在页面的一部分使用了 React，所有基础设施都围绕着页面的这一部分。因此，React 对路由或数据获取没有意见，他说。

基于 React 构建的 Next.js

但开发人员希望将 React 用于超出其预期用途的用途：他们希望将其用作框架。这导致了基于 React 构建但旨在填补其空白的社区解决方案的诞生，其中包括 Next.js，它是由包括现任 Vercel 首席执行官Guillermo Rauch在内的团队创建的。Occhino 表示，Next.js 满足了两个迫切的需求：应用程序中多个页面之间的数据获取和路由。

他说，React 团队开始与 Next.js 和其他出现的解决方案进行交流。Next.js 框架的作者开始提出建议，说明如何调整 React 来帮助他们。

“我们喜欢这个，因为如果你以所有这些新颖有趣的方式使用 React，它会帮助我们做得更好，”他说。“我们正在创新。我们一起学习。有更多人以我们从未想过的更多不同方式使用它。”

由于各种原因，React 团队的成员决定离开 Facebook，他们加入了 Vercel。Occhino 补充说，当 Rauch 甚至不确定自己是否想回去工作时，他就招募了 Occhino 加入前端云平台。

Occhino 说，高内聚力意味着 Next.js 不必记录 React 处理的所有部分——开发人员只需了解 React。

“Next.js 需要记录的表面区域只是添加到顶部的内容，”他说。“这是如何进行数据获取的，这是如何进行服务器端渲染的，这是如何完成所有开箱即用的工作的。