Remix 2.0 正式发布,现代化全栈Web框架!

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

  • 将默认的serverModuleFormatcjs更改为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
  • 停止传递isTypeScriptremix.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中。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/139852.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【数据结构】二叉搜索树与Map和Set

目录 ♫二叉搜索树 ♪什么是二叉搜索树 ♪二叉搜索树的特性 ♪模拟实现二叉搜索树 ♫Map ♪什么是Map ♪Map的内部类 ♪Map的常用方法 ♪Map的遍历 ♫Set ♪什么是Set ♪Set的常用方法 ♪Set的遍历 ♫二叉搜索树 ♪什么是二叉搜索树 二叉搜索树又称二叉排序树&#…

多线程带来的的风险-线程安全

多线程带来的的风险-线程安全 ~~ 多线程编程中,最难的地方,也是一个最重要的地方&#xff0c;还是一个最容易出错的地方,更是一个面试中特别爱考的地方.❤️❤️❤️ 线程安全的概念 万恶之源,罪魁祸首是多线程的抢占式执行,带来的随机性.~~&#x1f615;&#x1f615;&…

14:00面试,14:06就出来了,问的问题过于变态了。。。

从小厂出来&#xff0c;没想到在另一家公司又寄了。 到这家公司开始上班&#xff0c;加班是每天必不可少的&#xff0c;看在钱给的比较多的份上&#xff0c;就不太计较了。没想到5月一纸通知&#xff0c;所有人不准加班&#xff0c;加班费不仅没有了&#xff0c;薪资还要降40%…

redis安装问题

title: “Redis安装问题” createTime: 2022-01-04T20:47:0608:00 updateTime: 2022-01-04T20:47:0608:00 draft: false author: “name” tags: [“redis”] categories: [“install”] description: “测试的” title: redis安装可能遇到的错误 createTime: 2022-01-04T20:47…

第52节:cesium 3DTiles模型特效+选中高亮(含源码+视频)

结果示例: 完整源码: <template><div class="viewer"><vc-viewer @ready="ready" :logo="false"><vc-navigation

【【萌新的FPGA学习之实战流水灯】】

萌新的FPGA学习之实战流水灯 实验任务 本节的实验任务是使用领航者底板上的两个 PL LED 灯顺序点亮并熄灭&#xff0c;循环往复产生流水灯的效 果&#xff0c;流水间隔时间为 0.5s。 1MHz&#xff1d;1000000Hz 10的6次方 1ns&#xff1d;10的-9次方秒 开发板晶振50Mhz 计算得…

自主研究,开发并产业化的一套UWB精确定位系统源码 UWB源码

UWB (ULTRA WIDE BAND) 技术是一种无线载波通讯技术&#xff0c;它不采用正弦载波&#xff0c;而是利用纳秒级的非正弦波窄脉冲传输数据&#xff0c;因此其所占的频谱范围很宽。UWB定位系统研发团队依托在移动通信&#xff0c;雷达&#xff0c;微波电路&#xff0c;云计算与大数…

全国职业技能大赛云计算--高职组赛题卷②(容器云)

全国职业技能大赛云计算--高职组赛题卷②&#xff08;容器云&#xff09; 第二场次题目&#xff1a;容器云平台部署与运维任务1 Docker CE及私有仓库安装任务&#xff08;5分&#xff09;任务2 基于容器的web应用系统部署任务&#xff08;15分&#xff09;任务3 基于容器的持续…

Qt/C++音视频开发55-加密保存到文件并解密播放

一、前言 为了保证视频文件的安全性&#xff0c;有时候需要对保存的视频文件加密&#xff0c;然后播放的时候解密出来再播放&#xff0c;只有加密解密的秘钥一致时才能正常播放&#xff0c;用ffmpeg做视频文件的加密保存和解密播放比较简单&#xff0c;基于ffmpeg强大的字典参…

FPGA:卷积编码及维特比译码仿真

FPGA&#xff1a;卷积编码及维特比译码仿真 本篇记录一下在FPGA中完成卷积编码和维特比译码的过程&#xff0c;通过代码解释编码的过程和译码的过程&#xff0c;便于理解&#xff0c;同时也方便移植到其他工程中。 1. 准备工作 卷积编译码IP核—convolutionIP核和viterbiIP核…

STM32F407 串口使用DMA方式通信

DMA的原理&#xff0c;就是利用寄存器方式进行读写&#xff0c;这样的好处就是相对于中断触发&#xff08;往往一个字节字节的就中断一次&#xff09;&#xff0c;CPU中断次数大大降少&#xff0c;提高了效率&#xff0c;但也影响了实时性。总体来说&#xff0c;对于一般的应用…

Oracle 12c自动化管理特性的新进展:自动备份、自动恢复和自动维护功能的优势|oracle 12c相对oralce 11g的新特性(3)

一、前言: 前面几期讲解了oracle 12c多租户的使用、In-Memory列存储来提高查询性能以及数据库的克隆、全局数据字典和共享数据库资源的使用 今天我们讲讲oracle 12c的另外的一个自动化管理功能新特性:自动备份、自动恢复、自动维护的功能 二、自动备份、自动恢复、自动维护…

Android开发笔记 :理解Fragment

Android开发笔记&#xff1a;理解Fragment 导言 本篇文章产生的原因很简单&#xff0c;就是我在了解Android Jetpack中的Lifecycle框架时发现Lifecycle具体时间和状态的更新都是由一个名为ReportFragment的Fragment来跟踪的&#xff0c;为了更好的了解Fragment是如何追踪Activ…

机器学习的主要内容

分类任务 回归任务 有一些算法只能解决回归问题有一些算法只能解决分类问题有一些算法的思路既能解决回归问题&#xff0c;又能解决分类问题 一些情况下&#xff0c; 回归任务可以转化为分类任务&#xff0c; 比如我们预测学生的成绩&#xff0c;然后根据学生的成绩划分为A类、…

LeetCode刷题

一 【移除元素】 原题链接&#xff1a;27. 移除元素 - 力扣&#xff08;LeetCode&#xff09; 给你一个数组 nums 和一个值 val&#xff0c;你需要 原地 移除所有数值等于 val 的元素&#xff0c;并返回移除后数组的新长度。 不要使用额外的数组空间&#xff0c;你必须仅使用…

基因组注释(Annotation)

基因组组装完成后&#xff0c;或者是完成了草图&#xff0c;就不可避免遇到一个问题&#xff0c;需要对基因组序列进行注释。注释之前首先得构建基因模型&#xff0c;有三种策略&#xff1a; 从头注释(de novo prediction)&#xff1a;通过已有的概率模型来预测基因结构&#…

C++17中std::filesystem::path的使用

C17引入了std::filesystem库(文件系统库, filesystem library)。这里整理下std::filesystem::path的使用。 std::filesystem::path&#xff0c;文件系统路径&#xff0c;提供了对文件系统及其组件(例如路径、常规文件和目录)执行操作的工具。此path类主要用法包括&#x…

【Kafaka实现高吞吐量、低延迟的底层原理】

文章目录 Kafaka实现高吞吐量、低延迟的底层原理顺序写入Page Cache零拷贝分区分段索引批量读写批量压缩 Kafaka实现高吞吐量、低延迟的底层原理 Kafka虽然是基于磁盘做的数据存储&#xff0c;但却具有高并发、高吞吐量、低延时的特点&#xff0c;其吞吐量动辄几万、几十上百万…

点分治维护dp+连通块上新型dp思路+乘积方面进行根号dp:0922T4

首先连通块&#xff0c;所以点分治肯定是 Trick1 钦定选根的连通块dp 对于钦定选根的连通块dp&#xff0c;有一种常见思路 先对原树求其dfn序&#xff0c;按dfn序倒序求解 具体的&#xff0c;对于当前点 i i i&#xff08;注意这里都是指dfn序&#xff09;&#xff0c;我们…

设计模式之解析器(Interpreter)的C++实现

1、解析模式的提出 在软件开发的过程中&#xff0c;需要实现一种需求&#xff0c;该需求的结构稳定&#xff0c;但是需求的业务内容会频繁变化&#xff0c;如果使用普通语法实现需求&#xff0c;需要经常更新代码&#xff0c;不具有灵活性。可以使用解析器模式解决实现该类需求…