Remix，與Next.js相似，是一個(gè)全棧Web框架。其主要關(guān)注點(diǎn)在于Web標(biāo)準(zhǔn)以及提供快速、流暢和彈性的用戶體驗(yàn)。由React Router背后的團(tuán)隊(duì)開發(fā)，最近被Shopify收購，Remix基于現(xiàn)有的Web標(biāo)準(zhǔn)和API引入了激動(dòng)人心的新功能，并通過React的交互能力得到增強(qiáng)。它的創(chuàng)新為其他框架（如Next、SvelteKit、SolidStart等）中的各種功能提供了靈感。讓我們來探索其中的一些特性。

什么是Remix？

Remix.js是一個(gè)強(qiáng)大且靈活的 JavaScript 框架，用于構(gòu)建 Web 應(yīng)用程序。它提供了許多功能和優(yōu)點(diǎn)，使其成為開發(fā)人員的熱門選擇。憑借其先進(jìn)的功能和直觀的設(shè)計(jì)，Remix.js 簡化了開發(fā)過程，同時(shí)提供高性能和強(qiáng)大的應(yīng)用程序。Remix.js 提供了一個(gè)用于構(gòu)建現(xiàn)代 Web 應(yīng)用程序的綜合框架，將服務(wù)器端渲染的優(yōu)勢(shì)與客戶端 JavaScript 的靈活性和交互性相結(jié)合。

Remix.js 架構(gòu)

Remix.js 可以將客戶端和服務(wù)器代碼集成在同一個(gè)文件中，允許您使用統(tǒng)一的路由系統(tǒng)和簡化的數(shù)據(jù)加載來構(gòu)建服務(wù)器渲染的React應(yīng)用程序。Remix.js 中客戶端和服務(wù)器的組合為使用React構(gòu)建全棧應(yīng)用程序提供了簡化的開發(fā)體驗(yàn)。

Remix的優(yōu)勢(shì)

• 服務(wù)端運(yùn)行時(shí)：類似于Next.js，Remix在服務(wù)器上運(yùn)行，這對(duì)于在服務(wù)器上獲取數(shù)據(jù)并向?yàn)g覽器發(fā)送完整HTML響應(yīng)非常有利，避免了我們之前提到的SPA的一些常見缺點(diǎn)。
• 漸進(jìn)式增強(qiáng)：由于Remix在很大程度上依賴于Web標(biāo)準(zhǔn)，即使在沒有客戶端JavaScript的情況下，大多數(shù)功能也能正常工作。這是因?yàn)椋贘avaScript未加載時(shí)，Remix足夠智能，可以回退到原生瀏覽器API。例如，Link組件在JavaScript加載之前就是基本的HTML錨標(biāo)簽，加載后，它將變得更加互動(dòng)，以SPA的方式處理鏈接，創(chuàng)建即時(shí)反饋而無需完全重新加載頁面。
• 豐富的特性：開箱即用的功能包括基于文件的路由、嵌套布局、SSR、數(shù)據(jù)獲取、流式傳輸、異步狀態(tài)管理等，這意味著我們不需要自己設(shè)置這些功能；它們已經(jīng)準(zhǔn)備就緒。
• 優(yōu)秀的文檔：Remix有著出色的文檔，提供了許多實(shí)際示例，展示了如何解決我們作為Web開發(fā)人員每天面對(duì)的實(shí)際問題。還有一系列他們稱之為“棧”的啟動(dòng)項(xiàng)目。在撰寫本文時(shí)，有三個(gè)官方棧得到了很好的維護(hù)和文檔記錄。它們使我們能夠立即開始項(xiàng)目，而無需設(shè)置所有常見的東西，如prettier、eslint、樣式、測(cè)試、數(shù)據(jù)庫、基礎(chǔ)設(shè)施、CI/CD等。所有這些以及更多都包含在內(nèi)。
• 基礎(chǔ)設(shè)施的靈活性：Remix可以輕松部署到任何JavaScript運(yùn)行時(shí)和基礎(chǔ)設(shè)施提供商，這一點(diǎn)得到了很好的文檔記錄。
• 對(duì)Vite的支持：記得之前提到的Vite嗎？它主要用于SPA。不久前，Remix開始支持Vite！現(xiàn)在，我們可以利用Vite的所有功能及其豐富的生態(tài)系統(tǒng)。

Remix的挑戰(zhàn)

• 基礎(chǔ)設(shè)施復(fù)雜性：與Next.js相同，Remix在服務(wù)器上運(yùn)行增加了與SPA相比的服務(wù)器基礎(chǔ)設(shè)施的復(fù)雜性。
• 路由/數(shù)據(jù)耦合：將路由與數(shù)據(jù)連接起來可能有點(diǎn)棘手，因?yàn)槊總€(gè)路由都必須處理其所有組件的數(shù)據(jù)加載。這在組件樹較大時(shí)變得具有挑戰(zhàn)性，特別是當(dāng)一些深層嵌套的組件希望獲取自己的數(shù)據(jù)或當(dāng)我們希望重用處理自己數(shù)據(jù)獲取的組件時(shí)。
• 不支持RSC：解決路由/數(shù)據(jù)耦合的一個(gè)可能方法是使用RSC（React服務(wù)器組件）。遺憾的是，在撰寫本文時(shí)，Remix不支持RSC，但這已經(jīng)在他們的路線圖上，這對(duì)未來是一個(gè)好跡象。
• 沒有中間件支持：在撰寫本文時(shí)，沒有官方支持的中間件，這在處理身份驗(yàn)證或日志記錄等事情時(shí)可能非常方便。

總結(jié)

Remix.js是一個(gè)強(qiáng)大而靈活的JavaScript框架，為開發(fā)人員提供了簡化的開發(fā)體驗(yàn)和高性能的應(yīng)用程序。然而，在選擇使用Remix.js時(shí)，開發(fā)人員需要權(quán)衡其優(yōu)點(diǎn)和挑戰(zhàn)，并根據(jù)項(xiàng)目需求做出決策。