Ryan Florence presenting at React Conf
2024 年 5 月 21 日

React 19 的增量路径:React Conf 后续

Ryan Florence
联合创始人

更新(2024 年 12 月): React Router v7 已发布!

我们现在建议所有新项目都使用 React Router v7,并升级现有的 Remix 应用程序


上周,我在 React Conf 上做了一个关于 React Router 和 Remix 的演讲,并且我们在这里发布了一个公告。现在尘埃落定,我想对那里宣布的决定提供更多见解,并回答一些常见问题。

简而言之

对于 React Router

  • React Router v6 到 v7 将是一个非破坏性升级
  • 来自 Remix 的 Vite 插件将在 v7 中加入 React Router
  • Vite 插件只是使现有的 React Router 功能更方便使用,但使用 React Router v7 不是必需的
  • v7 将同时支持 React 18 和 React 19

对于 Remix

  • 本来应该成为 Remix v3 的现在是 React Router v7
  • Remix v2 到 React Router v7 将是一个非破坏性升级
  • Remix 将在未来的版本中以比以往更好的姿态回归,这些更改启用了增量采用策略

对于两者

  • React Router v7 带有今天 Remix 或 React Router 中没有的新功能:RSC、服务器操作、静态预渲染以及全面的增强类型安全

背景

Remix 变成了一个包装器

Remix 的功能在历史上已经回到了 React Router。事实上,在过去的一年左右,所有的新功能都从 React Router 开始,而 Remix 只是调用它。

在这一点上,Remix 只是一个 Vite 插件,使 React Router 更方便使用和部署。除了插件之外,Remix 几乎只是重新导出了 React Router。

在两个项目之间拆分代码、文档、问题、讨论和开发不再有任何技术目的。相反,它为我们增加了人为的管理负担,并给用户带来了困惑。

因此,我们将 Vite 插件移至 React Router 并将其命名为 v7。

RSC 改变了 Remix

带有 RSC 的 React 19 允许我们重新思考关于如何构建跨越堆栈中心的 React 应用程序的假设。它改变了路由、打包、数据加载、重新验证、挂起状态,几乎所有东西!

在尝试了 RSC,并在 Hydrogen v1 中运行了多年后,我们认为我们为 Remix 设计了一个新的 API,它比以往任何时候都更简单、更强大。在与 Shopify 的人员进行面对面预览时,其中一位工程师悄悄地说:“哇,这真是太美了”。

我们也认为它很美,但它非常不同! (我们很快会展示给您,但还不是现在。)

该模型差异足够大,似乎我们应该给它起一个不同的名字,以区别于今天的 Remix,并通过并行运行两个版本来实现更简单的增量采用。

但是我们喜欢 Remix!这个品牌,这个社区,这个精神。

当 Remix 应用程序升级到 React Router v7 时,这会在您的 package.json 中打开空间,以便在未来增量升级路径中并行运行当前和未来的 Remix。这也让我们保留了这个名字!

因此,虽然它可能看起来像是无谓的软件包洗牌,但技术事实是,今天的 Remix 只是一个包装器,而这种洗牌使进入未来的升级路径最为顺畅。

常见问题

这对 React Router 意味着什么?

React Router v7 将不需要 Vite。您可以像今天一样继续使用它。

只要您及时了解当前 v6 中的未来标志,从 v6 升级到 v7 将是一个非破坏性升级。

如果您采用 Vite 插件,您将可以轻松访问自动代码拆分、SSR、RSC、静态预渲染、带有服务器加载器、客户端加载器、操作等的路由模块 API。这些功能都可以通过将 bundler 与 React Router 中已有的功能结合使用来实现。

再次提醒 Reddit 用户:如果您及时了解当前的未来标志,您可以直接升级到 v7 而无需更改任何内容。

升级到 v7 后,您可以采用 Vite 插件并逐步更新部分代码,以利用它,但这不是必需的。

(有人注意到交叉结构吗?肯特?)

这对 Remix 意味着什么?

如果您及时了解当前的 Remix 未来标志,从 Remix v2 升级到 React Router v7 将是一个非破坏性升级。

当然,您需要将 package.json 更新到新的 React Router 包,并更新应用程序代码中的导入,但我们希望有一个代码修改器为您执行此操作。

我今天应该使用什么?

我们建议今天使用 Remix。如果您对服务器渲染不感兴趣,您可以部署单页应用程序,或者利用 React 和 Remix 的服务器功能,例如流式传输、服务器加载器、操作等等。

新功能和通往 React 19 的道路

React 的未来涉及服务器和构建工作流程,以利用 React 新的全栈组合故事。将您的 React Router 应用程序重写为 Remix 或其他框架对我们来说不是一个足够好的答案。

将 Vite 插件移至 React Router 提供了一种让使用任一项目的应用程序逐步采用您需要的新功能的方法,而无需弄乱今天运行良好的代码。诸如

  • SSR
  • RSC
  • 服务器操作
  • 静态预渲染(包括 RSC)

您还将从路由配置、参数到加载器和操作数据,甚至 <Link>navigate 的类型提示,获得全面的增强类型安全性,以了解您的应用程序中的已知路径。

React 19 挑战了过去 10 年的假设,这些更改为 React Router 和 Remix 提供了进入未来 10 年的增量路径。

构建更好的网站!(逐步地)


获取有关最新 Remix 新闻的更新

成为第一个了解新 Remix 功能、社区活动和教程的人。