Remix 是一款崛起中的 JavaScript 框架，正在與 Next.js 展開競爭，但其起源竟可追溯到 10 年前。我們與 Remix CEO Michael Jackson 進行了交談。

譯自Remix Takes on Next.js in Battle of the React Frameworks，作者 Richard MacManus 是 The New Stack 的高級編輯，并撰寫有關 Web 和應用程序開發趨勢的文章。此前他于 2003 年創立了 ReadWriteWeb，并將其打造成為世界上最有影響力的科技新聞網站之一。

JavaScript 框架 Remix 和 Astro 當前獲得了大量關注，作為 Next.js 的更簡單替代方案，Next.js 是 React 時代占主導地位的框架。在這兩款新興框架中，Remix是Next.js的更直接競爭對手，因為它們都基于 React 庫(Astro是框架無關的，用戶不僅可以與 React 一起使用，還可以與 Vue、Svelte 等一起使用)。

Next.js 和 Remix 有另一個共同點是它們的企業支持。Next.js 由風險投資支持的公司 Vercel 贊助，而 Remix 在 2022 年 10 月被 Shopify 收購。

因此，Remix 和 Next.js 似乎有很多共同點，但你可能沒有意識到的是，Remix 的起源可以追溯到 Next.js 幾年前。所以，為了更多了解 Remix 的歷史(和未來)，我采訪了它的共同創始人兼 CEOMichael Jackson。

React Router 和 Remix 的起源

Remix 的最大不同點可能是它的服務端渲染方式。Remix將自己描述為“無縫的服務端和瀏覽器運行時”，利用“分布式系統和原生瀏覽器功能而不是笨重的靜態構建”。它建立在 Web Fetch API 而不是 Node 之上，并且“可以在任何地方運行”。

Remix 的服務器方法的核心可以追溯到 2014 年，當時其創建者發布了 React Router。事實上，Remix 文檔聲明“90% 的 Remix 實際上只是 React Router”，它稱之為“一個非常老的、非常穩定的庫，可能是 React 生態系統中最大的依賴項”。

“React Router 是我們在 React 本身還在努力獲得普及的時候啟動的一個項目，”Jackson 告訴我，“現在回頭看通用的網絡格局，React 是王者，這很難相信。”

React Router 創建于 2014 年，由當時 Twitter 的工程師 Jackson 和一家名為 Instructure 的公司的工程師Ryan Florence創建。這對搭檔之所以創建 React Router，是因為這樣的庫在 React 本身還不存在。簡單來說，React Router實現了“客戶端路由”—— 意味著可以在不完全重載頁面的情況下加載新的 JavaScript 組件。

Jackson 和 Florence 在 React Router 周圍建立了咨詢公司，但多年來他們沒有提供自己的 React 整體使用方案。Guillermo Rauch 用 Next.js 打敗了他們，Next.js 在 2016 年 10 月首次亮相。但是直到 2020 年，Rauch 的公司，最初叫 ZEIT 但在 2020 年 4 月改名為 Vercel，才開始認真商業化 Next.js。就在這時，Remix 誕生了。

“2020 年，我們決定接管其余的技術棧，看看我們是否可以搭建一些從端到端更完整的東西，在 React Router 之上構建一個功能齊全的框架，”Jackson 說，“所以這就是 Remix。Remix 基本上是我們對 Web 開發的所有見解，建立在 React Router 的基礎上。”

他補充說，Remix 的許多靈感來自老式 PHP 框架，以及 Web 2.0 時代最流行的 Web 框架之一 Ruby on Rails。

Remix 如何在 Shopify 的技術棧中使用

Jackson 在我們的訪談中提到過幾次，多年來許多“大型企業公司”都在 React Router 之上開發——其中之一就是 Shopify。“所以他們已經認識我們，”他說，“并且在收購 Remix 之前就已經使用我們的軟件了。”

事實上，Shopify 曾試圖構建類似 Next.js 的框架。就在收購 Remix 前的不到一年的 2021 年 11 月，Shopify 發布了一個基于 React 的 Web 開發框架，稱為 Hydrogen。當時，Shopify 的首席工程師 Ilya Grigorik 告訴我，公司的目標是“使服務器端渲染和動態商務很好地協同工作”。Hydrogen 是他們為此定制的解決方案。

但是當 Remix 在 2022 年 10 月被收購時，它很快成為了 Shopify 的新默認框架。Jackson 告訴我，Shopify.com 使用 Remix 重建。公司的 iOS 和 Android 應用 Shop.app 也使用 Remix 重建。但是等等，還有更多。Jackson 說，Hydrogen 現在“完全建立在 Remix 之上”。

“所以現在，Hydrogen 在很大程度上起著 Remix 之上的庫的作用，”他說，“Remix 是 Hydrogen v2 的所有基礎。”

Shopify 當前的項目之一是重建所有電子商務客戶使用的控制面板。Jackson 說這是該公司最大的軟件項目(“數百萬行代碼”)。這個項目有趣的一個方面是，他們在 Remix 中使用Vite作為編譯器，這是來自Vue 社區而不是 React 社區的軟件。Jackson 將 Vite 描述為“類似于 Webpack”的 JavaScript 模塊打包器。

Jackson 還指出也在鼓勵第三方開發者使用 Remix。

“我們發布了一個模板，允許在第三方應用上開發的開發者實際上也用 Remix 構建他們的應用，并且，你知道的，與 Shopify 認證并做所有的這些事情。所以 [...] Remix 不僅是我們向商戶推薦的，也是我們向與 Shopify 集成的開發者推薦的。”

去年前端開發的一個主題是 React 生態系統日益復雜。我問 Jackson 是否同意 React變得太復雜了。

“是的，我看到了反對的聲音，”他承認，“有很多人說，哦，天哪，React 過去感覺更簡單。我對 React 社區的懇求是，要意識到這里有很多好的想法。目前許多這些前沿的 React 想法的實現 [...] 是 Next.js。這些想法首次在 Next.js 中發布和討論。”

Jackson 的觀點是，Remix 對新的 React 特性有自己的實現，所以值得開發者檢查它們。

“Ryan 和我構建 Remix 的全部意義——當我第一次看 Next 時，我甚至無法讓它返回適當的狀態碼。對我來說，非常早期，[...] 就很明顯，我們非常非常重視不同的事物。”

他列出漸進增強作為 Next.js 似乎不重視但 Remix 重視的事情之一。

“對我們這些做了一段時間 Web 的人來說，這個術語[漸進增強]傳達了很多理解和對用戶的價值。這是我們真的非常關心的東西，當你使用 Remix 構建時，這是你總能得到的。”