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

逐步过渡到 React 19:React Conf 之后

Ryan Florence
联合创始人

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

tl;dr

对于 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

React 19 与 RSC 使我们能够重新思考关于构建跨越堆栈中心的 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。这些功能都是通过将打包器与 React Router 中已经存在的特性结合起来实现的。

为了 Reddit 上的人再次说明一下:如果你已经更新了当前的未来标记,你可以直接升级到 v7,无需更改任何内容。

升级到 v7 后,你可以采用 Vite 插件,并根据需要逐步更新部分代码,以利用它的优势,但这并非必需。

(有没有人注意到这个逆转?Kent?)

这对 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 功能、社区活动和教程的人。