乐趣区

关于前端:Remix-20-正式发布现代化全栈Web框架

jiezi

9 月 16 日，全栈 Web 框架 Remix 正式公布了 2.0 版本，Remix 团队在公布 1.0 版本后通过近 2 年的继续致力，公布了 19 个主要版本、100 多个补丁版本，并解决了数千个问题和拉取申请，终于迎来了第二个次要版本！

Remix 具备以下个性：

  • 谋求速度、用户体验（UX），反对任何 SSR/SSG 等
  • 基于 Web 根底技术，如 HTML/CSS 与 HTTP 以及 Web Fecth API，在绝大部分状况能够不依赖于 JavaScript 运行，所以能够运行在任何环境下，如 Web Browser、Cloudflare Workers、Serverless 或者 Node.js 等
  • 客户端与服务端统一的开发体验，客户端代码与服务端代码写在一个文件里，无缝进行数据交互，同时基于 TypeScript，类型定义能够跨客户端与服务端共用
  • 内置文件即路由、动静路由、嵌套路由、资源路由等
  • 去掉 Loading、骨架屏等任何加载状态，页面中所有资源都能够预加载（Prefetch），页面简直能够立刻加载
  • 辞别以往瀑布式（Waterfall）的数据获取形式，数据获取在服务端并行（Parallel）获取，生成残缺 HTML 文档，相似 React 的并发个性
  • 提供开发网页须要所有状态，开箱即用；提供所有须要应用的组件，包含 <Links>、<Link>、<Meta>、<Form>、<Script/>，用于解决元信息、脚本、CSS、路由和表单相干的内容
  • 内置错误处理，针对非预期错误处理的 <ErrorBoundary> 和开发者抛出错误处理的 <CatchBoundary>

Remix 是一个由 React Router 开发团队所开发的基于 React 和 TypeScript 的全栈框架。2021 年 11 月，Remix 正式开源，至今已在 Github 上取得了 24.6k star。Remix 正式开源时，引发了前端圈不小的关注，其被普遍认为是 Next.js 的强劲对手，那时隔两年，它和 Next.js 之间的“竞争”怎么样了呢？

目前，Next.js 领有 112k star，是 Remix 的近 5 倍。Next.js 周下载量 279 万，而 Remix 仅有 1.4 万，Next.js 是 Remix 的近 200 倍。可见，Remix 并没有像大家意料的那样，成为 Next.js 的无力竞争对手，在开发者社区中只有较小的市场份额。尽管如此，Remix 依然吸引了一些开发者，并且在特定畛域或我的项目中有其劣势和适用性。

上面就来看看 Remix 2.0 都有哪些更新！

v1.0 以来的更新

  • v1.8 和 v1.10 中，将 Remix 与 React Router v6 进行了对齐。当开始开发 Remix 时，承诺它将使 React Router 变得更好。这个版本真正实现了这一承诺，并将两个库都对齐到应用雷同的底层依赖。
  • 在 v1.11 中，公布了 ”promises over the wire”，即提早加载模块。当初，如果真的想在 Remix 利用中增加 loading 图标，能够这么做了！
  • 在 v1.11 中，增加了 ”flat” 路由，简化了应用嵌套布局而不须要嵌套目录的操作，这成为 v2 版本的默认设置。
  • 在 v1.13 和 v1.16 中，改良了 Remix 对各种 CSS 策略的反对，包含 PostCSS、CSS 模块、Vanilla Extract 和 CSS 副作用（全局）导入。
  • 在 v1.14 和 v1.18 中，公布了一个新的开发服务器，反对热更新（HMR）和热数据重载（HDR）。这个新的开发服务器成为 v2 版本的默认设置。
  • 在 v2 版本中，最重要的亮点之一是全新的 create-remix 命令行工具体验。

v2.0 的更新内容

重大变动

降级的依赖要求

Remix v2 曾经降级了对 React 和 Node 的最低版本反对，并正式反对以下版本：

  • React 18
  • Node 18 或更高版本

移除将来标记

以下将来标记已被移除，并且它们的行为当初是默认的，当初能够从 remix.config.js 文件中删除这些设置。

  • v2_dev，新的开发服务器，具备 HMR + HDR，如果在 future.v2_dev 中有配置而不仅仅是布尔值（例如，future.v2_dev.port），能够将它们晋升到 remix.config.js 中的根 dev 对象中。
  • v2_errorBoundary，移除了CatchBoundary，改为应用单个ErrorBoundary
  • v2_headers，批改了嵌套路由场景中的头部逻辑
  • v2_meta，批改了 meta() 的返回格局
  • v2_normalizeFormMethod，将 formMethod 规范化为大写
  • v2_routeConvention，当初默认状况下，路由应用扁平化路由约定

重大变更 /API 删除

上面列出了 Remix v1 中具备弃用正告的其余重大更改 /API 删除。如果应用的是最新 1.19.3 版本且没有任何控制台正告，那么可能能够继续执行所有这些操作！

（1）有破坏性更改 /API 移除

  • remix.config.js
  • 将 browserBuildDirectory 重命名为assetsBuildDirectory
  • 删除devServerBroadcastDelay
  • 将 devServerPort 重命名为dev.port
  • 如果在 1.x 版本中抉择此选项，则配置标记将是future.v2_dev.port，但在稳固的 2.x 版本中，它将是dev.port
  • 将默认的 serverModuleFormat 从cjs更改为esm
  • 删除serverBuildTarget
  • 将 serverBuildDirectory 更改为serverBuildPath
  • 默认状况下不再在服务器上对 Node 内置模块进行 polyfill，必须通过serverNodeBuiltinsPolyfill 抉择退出polyfill
  • @remix-run/react
  • 删除useTransition
  • 删除 fetcher.type 并压缩fetcher.submission
  • <fetcher.Form method="get">当初更精确地被归类为state：“loading”，而不是state：“submitting”，以更好地与底层的 GET 申请保持一致
  • 要求 camelCased 版本的imagesrcset/imagesizes

（2）没有弃用正告

此版本没能在每个破坏性更改或 API 移除上都收到废除正告。以下是可能须要查看的残余变更列表，以降级到 v2：

  • remix.config.js
  • Node 内置模块不再默认在浏览器中进行 polyfill，能够通过 browserNodeBuiltinsPolyfill 选项抉择退出polyfill
  • 如果存在配置文件，则 PostCSS/Tailwind 将默认启用，能够通过 postcss 和 tailwind 标记禁用此性能
  • @remix-run/cloudflare
  • 删除 createCloudflareKVSessionStorage 办法
  • 不再反对 @cloudflare/workers-types v2 和 v3
  • @remix-run/dev
  • 删除REMIX_DEV_HTTP_ORIGIN，减少REMIX_DEV_ORIGIN
  • 删除 REMIX_DEV_SERVER_WS_PORT，减少dev.port 或--port
  • 删除 --no-restart/restart 标记，减少--manual/manual
  • 删除 --scheme/scheme 和--host/host，减少REMIX_DEV_ORIGIN
  • 删除 codemod 命令
  • @remix-run/eslint-config
  • 删除 @remix-run/eslint-config/jest 配置
  • 删除魔法 imports 的 ESLint 正告
  • @remix-run/netlify
  • @remix-run/netlify适配器已被删除，举荐应用 Netlify 官网适配器
  • @remix-run/node
  • 默认不再对 fetch 进行 polyfill，利用须要调用installGlobals() 来装置polyfills
  • 不再从 @remix-run/node 导出 fetch 和相干 API，利用应应用全局命名空间中的版本
  • 利用须要调用 sourceMapSupport.install() 来设置源映射反对
  • @remix-run/react
  • 删除unstable_shouldReload，减少shouldRevalidate
  • @remix-run/serve
  • 如果 3000 端口被占用且未指定 PORT，则 remix-serve 将抉择一个可用的端口
  • 集成手动模式
  • 删除未记录的createApp Node API
  • 在 remix-serve 中保留动静 imports 以供内部 bundle 应用
  • @remix-run/vercel
  • @remix-run/vercel适配器已被删除，举荐应用 Vercel 官网提供的性能
  • create-remix
  • 进行传递 isTypeScript 给remix.init脚本
  • remix
  • 删除魔法 exports

（3）毁坏类型变动

  • 从 future.v2_meta 类型中删除了 V2_ 前缀，因为它们当初是默认行为。
  • V2_MetaArgs -> MetaArgs
  • V2_MetaDescriptor -> MetaDescriptor
  • V2_MetaFunction -> MetaFunction
  • V2_MetaMatch -> MetaMatch
  • V2_MetaMatches -> MetaMatches
  • V2_ServerRuntimeMetaArgs -> ServerRuntimeMetaArgs
  • V2_ServerRuntimeMetaDescriptor -> ServerRuntimeMetaDescriptor
  • V2_ServerRuntimeMetaFunction -> ServerRuntimeMetaFunction
  • V2_ServerRuntimeMetaMatch -> ServerRuntimeMetaMatch
  • V2_ServerRuntimeMetaMatches -> ServerRuntimeMetaMatches
  • 以下类型已进行调整，更偏差于应用 unknown 而不是any，并与底层的 React Router 类型保持一致：
  • 将 useMatches() 的返回类型从 RouteMatch 改名为UIMatch
  • 将 LoaderArgs/ActionArgs 改名为LoaderFunctionArgs/ActionFunctionArgs
  • 将 AppData 的类型从 any 改为unknown
  • 将 Location["state"]（useLocation.state）的类型从any 改为unknown
  • 将 UIMatch["data"]（useMatches()[i].data）的类型从any 改为unknown
  • 将 UIMatch["handle"]（useMatches()[i].handle）的类型从{[k: string]: any } 改为unknown
  • 将 Fetcher["data"]（useFetcher().data）的类型从any 改为unknown
  • MetaMatch.handle（在 meta() 函数中应用）的类型从 any 改为unknown
  • AppData/RouteHandle不再导出，因为它们只是 unknown 的别名

新增性能

  • 新的 create-remix 命令行界面工具
  • 最显著的扭转是，不再应用下拉菜单抉择模板 / 堆栈，而是应用 --template 参数和一直增长的可用模板列表。
  • 新增 --overwrite 参数
  • 反对 bun 包管理器
  • 通过 build.mode 检测构建模式
  • 反对通过 serverNodeBuiltinsPolyfill.globals/browserNodeBuiltinsPolyfill.globals 来对 Node 全局对象进行polyfill
  • 新的 redirectDocument 实用工具，通过从新加载文档实现重定向
  • 在 meta 参数中增加error，以便能够渲染谬误题目等
  • unstable_createRemixStub当初反对在 stubbed Remix 路由上增加 meta/links 函数
  • unstable_createRemixStub不再反对在路由上应用 element/errorElement 属性。必须应用 Component/ErrorBoundary 与从 Remix 路由模块导出的内容匹配。

其余更新

  • Remix 当初在外部应用 React Router 的 route.lazy 办法在导航时加载路由模块。
  • 删除了 @remix-run/node 中的atob/btoa polyfills，改用内置版本。
  • 将 @remix-run/dev 包与 @remix-run/css-bundle 包的内容解耦。
  • 当初，@remix-run/css-bundle包的内容齐全由 Remix 编译器治理。只管依然倡议 Remix 依赖项共享雷同的版本，但这个变动确保在降级 @remix-run/dev 而不降级 @remix-run/css-bundle 时没有运行时谬误。
  • remix-serve当初将抉择一个闲暇的端口（如果 3000 端口被占用）。
  • 如果设置了 PORT 环境变量，remix-serve将应用该端口。
  • 否则，remix-serve将抉择一个闲暇的端口（除非 3000 端口已被占用）。
  • 更新的依赖项：
  • react-router-dom@6.16.0
  • @remix-run/router@1.9.0
  • @remix-run/web-fetch@4.4.0
  • @remix-run/web-file@3.1.0
  • @remix-run/web-stream@1.1.0

React Server Components？

Remix 对于 React Server Components（RSC）的反对打算是踊跃的。他们心愿在 Remix v3 中增加对 RSC 的反对，并心愿可能展现这项技术在多个框架中的能力。

RSC 是一个乏味且弱小的性能，然而 Remix v2 是基于以后稳固的 React 个性构建的，因而 RSC 在 Remix v2 中尚未蕴含。一旦 RSC 稳定下来，Remix 将会反对它。

然而，与之前反对的其余 React 个性相比，“反对 RSC”须要更深刻的集成。RSC 的异步组件与 Remix 的加载器和组件联合得十分类似，并且 Remix 在 v3 中决定摒弃应用第三方库 useLoaderData，因而在数据加载方面可能会有所不同。他们心愿开发者只须要将现有的加载器代码迁徙到新的异步组件中，但须要留神数据依赖的瀑布效应。

Remix 团队在往年早些时候的 Remix Conf 上与 React 外围团队的成员举办了一个讨论会，探讨了 RSC 以及如何独特推动这项技术的稳固公布。他们以各种形式帮忙筹备 RSC，并心愿可能胜利地集成它到 Remix 中。

退出移动版