9 月 16 日，全棧 Web 框架 Remix 正式發(fā)布了 2.0 版本，Remix 團隊在發(fā)布 1.0 版本后經(jīng)過近 2 年的持續(xù)努力，發(fā)布了 19 個次要版本、100 多個補丁版本，并解決了數(shù)千個問題和拉取請求，終于迎來了第二個主要版本！

Remix 具有以下特性：

• 追求速度、用戶體驗（UX），支持任何 SSR/SSG 等
• 基于 Web 基礎(chǔ)技術(shù)，如 HTML/CSS 與 HTTP 以及 Web Fecth API，在絕大部分情況可以不依賴于 JavaScript 運行，所以可以運行在任何環(huán)境下，如 Web Browser、Cloudflare Workers、Serverless 或者 Node.js 等
• 客戶端與服務(wù)端一致的開發(fā)體驗，客戶端代碼與服務(wù)端代碼寫在一個文件里，無縫進行數(shù)據(jù)交互，同時基于 TypeScript，類型定義可以跨客戶端與服務(wù)端共用
• 內(nèi)置文件即路由、動態(tài)路由、嵌套路由、資源路由等
• 去掉 Loading、骨架屏等任何加載狀態(tài)，頁面中所有資源都可以預(yù)加載（Prefetch），頁面幾乎可以立即加載
• 告別以往瀑布式（Waterfall）的數(shù)據(jù)獲取方式，數(shù)據(jù)獲取在服務(wù)端并行（Parallel）獲取，生成完整 HTML 文檔，類似 React 的并發(fā)特性
• 提供開發(fā)網(wǎng)頁需要所有狀態(tài)，開箱即用；提供所有需要使用的組件，包括   <Links> 、<Link>、 <Meta> 、<Form> 、<Script/> ，用于處理元信息、腳本、CSS、路由和表單相關(guān)的內(nèi)容
• 內(nèi)置錯誤處理，針對非預(yù)期錯誤處理的 <ErrorBoundary> 和開發(fā)者拋出錯誤處理的 <CatchBoundary>

Remix 是一個由 React Router 開發(fā)團隊所開發(fā)的基于 React 和 TypeScript 的全?？蚣?。2021 年 11 月，Remix 正式開源，至今已在 Github 上獲得了 24.6k star。Remix 正式開源時，引發(fā)了前端圈不小的關(guān)注，其被普遍認為是 Next.js 的強勁對手，那時隔兩年，它和 Next.js 之間的“競爭”怎么樣了呢？

目前，Next.js 擁有 112k star，是 Remix 的近 5 倍。Next.js 周下載量 279 萬，而 Remix 僅有 1.4 萬，Next.js 是 Remix 的近 200 倍。可見，Remix 并沒有像大家預(yù)料的那樣，成為 Next.js 的有力競爭對手，在開發(fā)者社區(qū)中只有較小的市場份額。盡管如此，Remix 仍然吸引了一些開發(fā)者，并且在特定領(lǐng)域或項目中有其優(yōu)勢和適用性。

下面就來看看 Remix 2.0 都有哪些更新！

v1.0 以來的更新

• v1.8和v1.10中，將 Remix與React Router v6進行了對齊。當開始開發(fā)Remix時，承諾它將使React Router變得更好。這個版本真正實現(xiàn)了這一承諾，并將兩個庫都對齊到使用相同的底層依賴。
• 在v1.11中，發(fā)布了"promises over the wire"，即延遲加載模塊?，F(xiàn)在，如果真的想在Remix應(yīng)用中添加 loading 圖標，可以這么做了！
• 在v1.11中，添加了"flat"路由，簡化了使用嵌套布局而不需要嵌套目錄的操作，這成為v2版本的默認設(shè)置。
• 在v1.13和v1.16中，改進了Remix對各種CSS策略的支持，包括PostCSS、CSS模塊、Vanilla Extract 和CSS副作用（全局）導(dǎo)入。
• 在v1.14和v1.18中，發(fā)布了一個新的開發(fā)服務(wù)器，支持熱更新（HMR）和熱數(shù)據(jù)重載（HDR）。這個新的開發(fā)服務(wù)器成為v2版本的默認設(shè)置。
• 在v2版本中，最重要的亮點之一是全新的create-remix命令行工具體驗。

v2.0 的更新內(nèi)容

重大變化

升級的依賴要求

Remix v2已經(jīng)升級了對React和Node的最低版本支持，并正式支持以下版本：

• React 18
• Node 18 或更高版本

移除未來標志

以下未來標志已被移除，并且它們的行為現(xiàn)在是默認的，現(xiàn)在可以從remix.config.js文件中刪除這些設(shè)置。

• v2_dev，新的開發(fā)服務(wù)器，具有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規(guī)范化為大寫
• v2_routeConvention，現(xiàn)在默認情況下，路由使用扁平化路由約定

重大變更/API 刪除

下面列出了 Remix v1 中具有棄用警告的其他重大更改/API 刪除。如果使用的是最新1.19.3版本且沒有任何控制臺警告，那么可能可以繼續(xù)執(zhí)行所有這些操作！

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

• remix.config.js

• 將browserBuildDirectory重命名為assetsBuildDirectory
• 刪除devServerBroadcastDelay
• 將devServerPort重命名為dev.port
• 如果在1.x版本中選擇此選項，則配置標記將是future.v2_dev.port，但在穩(wěn)定的2.x版本中，它將是dev.port
• 將默認的serverModuleFormat從cjs更改為esm
• 刪除serverBuildTarget
• 將serverBuildDirectory更改為serverBuildPath
• 默認情況下不再在服務(wù)器上對Node內(nèi)置模塊進行polyfill，必須通過serverNodeBuiltinsPolyfill選擇加入polyfill

• @remix-run/react

• 刪除useTransition

• 刪除fetcher.type并壓縮fetcher.submission

• <fetcher.Form method="get">現(xiàn)在更準確地被歸類為state：“l(fā)oading”，而不是state：“submitting”，以更好地與底層的GET請求保持一致

• 要求camelCased版本的imagesrcset/imagesizes

（2）沒有棄用警告

此版本沒能在每個破壞性更改或API移除上都收到廢棄警告。以下是可能需要查看的剩余變更列表，以升級到v2：

• remix.config.js

• Node內(nèi)置模塊不再默認在瀏覽器中進行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，應(yīng)用需要調(diào)用installGlobals()來安裝polyfills

• 不再從@remix-run/node導(dǎo)出fetch和相關(guān) API，應(yīng)用應(yīng)使用全局命名空間中的版本

• 應(yīng)用需要調(diào)用sourceMapSupport.install()來設(shè)置源映射支持

• @remix-run/react

• 刪除unstable_shouldReload，增加shouldRevalidate

• @remix-run/serve

• 如果3000端口被占用且未指定PORT，則remix-serve將選擇一個可用的端口

• 集成手動模式

• 刪除未記錄的createApp Node API

• 在remix-serve中保留動態(tài)imports以供外部bundle使用

• @remix-run/vercel

• @remix-run/vercel適配器已被刪除，推薦使用Vercel官方提供的功能

• create-remix

• 停止傳遞isTypeScript給remix.init腳本

• remix

• 刪除魔法 exports

（3）破壞類型變化

• 從 future.v2_meta 類型中刪除了 V2_ 前綴，因為它們現(xiàn)在是默認行為。

• 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

• 以下類型已進行調(diào)整，更偏向于使用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()函數(shù)中使用）的類型從any改為unknown

• AppData/RouteHandle不再導(dǎo)出，因為它們只是unknown的別名

新增功能

• 新的create-remix命令行界面工具

• 最顯著的改變是，不再使用下拉菜單選擇模板/堆棧，而是使用--template參數(shù)和不斷增長的可用模板列表。
• 新增--overwrite參數(shù)
• 支持bun包管理器

• 通過build.mode檢測構(gòu)建模式
• 支持通過serverNodeBuiltinsPolyfill.globals/browserNodeBuiltinsPolyfill.globals來對Node全局對象進行polyfill
• 新的redirectDocument實用工具，通過重新加載文檔實現(xiàn)重定向
• 在meta參數(shù)中添加error，以便可以渲染錯誤標題等
• unstable_createRemixStub現(xiàn)在支持在stubbed Remix路由上添加meta/links函數(shù)
• unstable_createRemixStub不再支持在路由上使用element/errorElement屬性。必須使用Component/ErrorBoundary與從Remix路由模塊導(dǎo)出的內(nèi)容匹配。

其他更新

• Remix現(xiàn)在在內(nèi)部使用React Router的route.lazy方法在導(dǎo)航時加載路由模塊。
• 刪除了@remix-run/node中的atob/btoa polyfills，改用內(nèi)置版本。
• 將@remix-run/dev包與@remix-run/css-bundle包的內(nèi)容解耦。
• 現(xiàn)在，@remix-run/css-bundle包的內(nèi)容完全由Remix編譯器管理。盡管仍然建議Remix依賴項共享相同的版本，但這個變化確保在升級@remix-run/dev而不升級@remix-run/css-bundle時沒有運行時錯誤。
• remix-serve現(xiàn)在將選擇一個空閑的端口（如果3000端口被占用）。

• 如果設(shè)置了PORT環(huán)境變量，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的支持，并希望能夠展示這項技術(shù)在多個框架中的能力。

RSC是一個有趣且強大的功能，但是 Remix v2 是基于當前穩(wěn)定的React特性構(gòu)建的，因此 RSC 在 Remix v2 中尚未包含。一旦RSC穩(wěn)定下來，Remix 將會支持它。

然而，與之前支持的其他React特性相比，“支持RSC”需要更深入的集成。RSC的異步組件與Remix的加載器和組件結(jié)合得非常相似，并且Remix在v3中決定摒棄使用第三方庫useLoaderData，因此在數(shù)據(jù)加載方面可能會有所不同。他們希望開發(fā)者只需要將現(xiàn)有的加載器代碼遷移到新的異步組件中，但需要注意數(shù)據(jù)依賴的瀑布效應(yīng)。

Remix團隊在今年早些時候的Remix Conf上與React核心團隊的成員舉辦了一個討論會，討論了RSC以及如何共同推進這項技術(shù)的穩(wěn)定發(fā)布。他們以各種方式幫助準備RSC，并希望能夠成功地集成它到Remix中。