Misago 從 React.js 遷移至 HTMX 以提升效能與可維護性

Misago 從 React.js 遷移至 HTMX 以提升效能與可維護性

Misago 正在用 HTMX 取代 React.js，以消除冗餘代碼並提升效能

Misago 正在將其前端架構從基於 React.js 的單頁應用 (SPA) 模式，轉回由 HTMX 驅動的伺服器端渲染。這次轉型旨在解決「雙重實作」問題，即頁面被重複構建了兩次——一次作為 Django templates 用於初始載入/SEO，另一次作為 React components 用於互動——這導致了維護成本增加和回應速度變慢。

React.js 與 Django 混合模式的問題

之前的架構需要在後端與前端之間進行複雜的同步，這造成了幾個技術瓶頸：

  • 重複實作： 大多數頁面同時以 Django templates 和 React components 的形式存在，這意味著任何 UI 變更都需要在兩個不同的地方進行更新。
  • 開發摩擦： 編輯 Django templates 的 Customizers 經常會看到他們的修改在被 React 的客戶端渲染覆蓋之前，出現短暫的閃爍。
  • 延遲增加： 為了「預烘焙」React app 而需要將數據序列化為 JSON，這減慢了伺服器回應的生成速度。
  • Bundle 膨脹： 翻譯訊息在 django.po 和 djangojs.po 檔案中重複出現，增加了用戶的初始下載大小。
  • 效能下降： 大型 JavaScript bundles 對效能產生了負面影響，特別是在舊款行動裝置上。
  • 外掛複雜性： 外掛開發者被迫同時實作 Django templates 和 React components，這要求在網站構建流程中包含 JavaScript 編譯步驟。

為何選擇 HTMX 處理論壇互動

論壇軟體通常只需要在孤立的「島嶼」中進行互動——例如管理動作、投票或更新通知——而不是需要完全流暢的 SPA 體驗。HTMX 允許這些特定區域透過在互動時將部分 HTML 替換為新的伺服器端渲染 HTML 來實現動態化，而不需要重新載入整個頁面。

透過使用 HTMX，Misago 消除了這些互動對 JSON 序列化和專用 JavaScript components 的需求。後端只需針對請求的「島嶼」回傳必要的 HTML 斷片，瀏覽器隨即將其替換到現有頁面中。

對 JavaScript bundle 大小的可衡量影響

早期的遷移步驟已經顯示出總體 JavaScript 佔用量的減少。例如，將「Forum options」頁面替換為「Account settings」，並使用 Django views 和 HTMX 重寫「Threads lists」，使得 misago.js 減少了以下容量：

  • Account settings 遷移： misago.js 減少了 37kb (gzipped 後為 17kb)。
  • Threads lists 遷移： misago.js 減少了 48kb (gzipped 後為 8kb)。

在這些變更之前，Misago 0.39 的基準 JS 大小包括 679kb 的 vendor.js 和 615kb (未壓縮) 的 misago.js。

社群對 HTMX 轉型的看法

圍繞這次遷移的技術討論凸顯了支持伺服器端渲染簡潔性的人，與主張客戶端狀態管理必要性的人之間的分歧。

支持在論壇中使用 HTMX 的論點

許多開發者認為論壇是 HTMX 的理想使用案例，因為它們主要提供以文本為內容的內容。一位貢獻者指出：

我認為 HTMX 非常適合論壇軟體。論壇網站大多提供非互動性內容... 使用 HTMX，你可以透過伺服器傳送事件 (server-sent events) 進行部分渲染和即時更新。

限制與權衡

其他開發者指出，HTMX 在處理「豐富」的互動或高頻率的 DOM 更新時可能會遇到困難。一位用戶分享了在使用產品列表頁時的負面體驗：

我遇到的問題是，當我讓所有內容都作為一個「回應」一起運作時，整個體驗變得非常緩慢。傳回整個表單的所有 HTML... 當結果超過半打時，會感覺到明顯的延遲。

另一個批評集中在與 React 相比缺乏細粒度的 DOM 調解 (reconciliation)：

React 是圍繞這類需求設計的。它們在底層進行了一些神奇的操作來支持無縫的 DOM 調解... 如果有人發布了一個類似 SSR 的東西像 htmx，感覺就像少了點什麼。

未來的遷移策略

Misago 將採取漸進式步驟轉向 HTMX，每次發布都會遷移個別組件（如 Navbar、threads list 和 user profiles）。在過渡期間，某些頁面可能會暫時作為標準的多頁應用 (MPA) 運作並進行全頁重新載入，除非是為了防止無法忍受的使用者體驗摩擦而使用 AJAX 或 HTMX，例如在按讚貼文或在投票中投票時。

Sources