Remix 2.0 正式發佈，現代化全棧Web框架！

来源:https://www.cnblogs.com/cuggz/archive/2023/09/24/17725735.html
-Advertisement-
Play Games

9 月 16 日，全棧 Web 框架 Remix 正式發佈了 2.0 版本，Remix 團隊在發佈 1.0 版本後經過近 2 年的持續努力，發佈了 19 個次要版本、100 多個補丁版本，並解決了數千個問題和拉取請求，終於迎來了第二個主要版本！ Remix 具有以下特性： 追求速度、用戶體驗（UX） ...


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埠已被占用）。

  • 更新的依賴項：

  • [email protected]

  • @remix-run/[email protected]

  • @remix-run/[email protected]

  • @remix-run/[email protected]

  • @remix-run/[email protected]

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中。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 6.swagger完善：界面顯示註釋+多版本控制
    周末，寫點簡單的水一下。 新版本的vs創建項目的時候可以選擇自帶一個swagger。然而這隻是基本的swagger功能。 幾個介面無所謂啦，隨著介面越來越多，就這麼丟給你，一時間也會懵逼，所以這篇文章要做的有兩個功能。 給swagger文檔添加註釋 給swagger添加切換“版本”的功能(也可以理解 ...
  • 嵌入式軟體調試與驗證2模擬
    痞子衡嵌入式半月刊： 第 81 期 這裡分享嵌入式領域有用有趣的項目/工具以及一些熱點新聞，農曆年分二十四節氣，希望在每個交節之日準時發佈一期。 本期刊是開源項目（GitHub: JayHeng/pzh-mcu-bi-weekly），歡迎提交 issue，投稿或推薦你知道的嵌入式那些事兒。 上期回顧 ...
  • Redis 命令工具
    Redis 命令工具 redis-server Redis 伺服器啟動命令 redis-cli shutdown 停止服務 redis-benchmark：性能測試工具，用於檢測 Redis 在本機的運行效率 redis-check-aof：修複有問題的 AOF 持久化文件 redis-check- ...
  • Vue-進階：路由及elementUI組合開發
    Vue-router路由 什麼是vue-router？ 服務端路由指的是伺服器根據用戶訪問的 URL 路徑返回不同的響應結果。當我們在一個傳統的服務端渲染的 web 應用中點擊一個鏈接時，瀏覽器會從服務端獲得全新的 HTML，然後重新載入整個頁面。 然而，在單頁面應用中，客戶端的 JavaScrip ...
  • 竟然可以在一個項目中混用 Vue 和 React？
    React和Vue是前端開發中的兩大熱門框架，各自都有著強大的功能和豐富的生態系統。然而，你有沒有想過，在一個項目中同時使用React和Vue？是的，你沒有聽錯，可以在同一個項目中混用這兩個框架！本文就來分享 3 個用於混合使用 React 和 Vue 的工具！ Veaury Veaury 是一個基 ...
  • 2023 年前端 UI 組件庫概述，百花齊放！
    UI組件庫提供了各種常見的 UI 元素，比如按鈕、輸入框、菜單等，只需要調用相應的組件並按照需求進行配置，就能夠快速構建出一個功能完善的 UI。 雖然市面上有許多不同的UI組件庫可供選擇，但在2023年底也並沒有出現一兩個明確的解決方案能夠適用於所有情況。因為不同的前端框架（例如React、Angu ...
  • antd/fusion表格增加圈選複製功能
    背景介紹 我們存在著大量在PC頁面通過表格看數據業務場景，表格又分為兩種，一種是 antd / fusion 這種基於 dom 元素的表格，另一種是通過 canvas 繪製的類似 excel 的表格。 基於 dom 的表格功能豐富較為美觀，能實現多表頭、合併單元格和各種自定義渲染（如表格中渲染圖形 ...
  • 前端高頻面試題彙總正題+(附答案解析)
    在現代的Web開發中，優化用戶體驗至關重要。一種常見的方法是在頁面載入時預載入圖片，並展示一個載入進度條，讓用戶瞭解載入進度。在本文中，我們將深入探討如何實現這兩個關鍵功能，以提高網站性能和用戶滿意度 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類