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 的高級編輯，并撰寫有關(guān) Web 和應(yīng)用程序開發(fā)趨勢的文章。此前他于 2003 年創(chuàng)立了 ReadWriteWeb，并將其打造成為世界上最有影響力的科技新聞網(wǎng)站之一。

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

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

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

React Router 和 Remix 的起源

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

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

“React Router 是我們在 React 本身還在努力獲得普及的時候啟動的一個項目，”Jackson 告訴我，“現(xiàn)在回頭看通用的網(wǎng)絡(luò)格局，React 是王者，這很難相信?！?/p>

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

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

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

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

Remix 如何在 Shopify 的技術(shù)棧中使用

Jackson 在我們的訪談中提到過幾次，多年來許多“大型企業(yè)公司”都在 React Router 之上開發(fā)——其中之一就是 Shopify。“所以他們已經(jīng)認(rèn)識我們，”他說，“并且在收購 Remix 之前就已經(jīng)使用我們的軟件了?！?/p>

事實上，Shopify 曾試圖構(gòu)建類似 Next.js 的框架。就在收購 Remix 前的不到一年的 2021 年 11 月，Shopify 發(fā)布了一個基于 React 的 Web 開發(fā)框架，稱為 Hydrogen。當(dāng)時，Shopify 的首席工程師 Ilya Grigorik 告訴我，公司的目標(biāo)是“使服務(wù)器端渲染和動態(tài)商務(wù)很好地協(xié)同工作”。Hydrogen 是他們?yōu)榇硕ㄖ频慕鉀Q方案。

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

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

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

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

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

去年前端開發(fā)的一個主題是 React 生態(tài)系統(tǒng)日益復(fù)雜。我問 Jackson 是否同意 React變得太復(fù)雜了。

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

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

“Ryan 和我構(gòu)建 Remix 的全部意義——當(dāng)我第一次看 Next 時，我甚至無法讓它返回適當(dāng)?shù)臓顟B(tài)碼。對我來說，非常早期，[...] 就很明顯，我們非常非常重視不同的事物?！?/p>

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

“對我們這些做了一段時間 Web 的人來說，這個術(shù)語[漸進增強]傳達了很多理解和對用戶的價值。這是我們真的非常關(guān)心的東西，當(dāng)你使用 Remix 構(gòu)建時，這是你總能得到的?！?/p>