反SPA的後端路由三條路線

banq發表於2022-02-02
後端路由

現代JavaScript 框架旨在構建單頁應用程式SPA，SPA名稱源於它不會返回後端伺服器就能在頁面之間導航的事實，因為所有路由都發生在瀏覽器中。

自從十多年前 SPA 出現以來，JavaScript 已經開啟了 Web 體驗所能達到的天花板，但它是有代價的。那些沒有最好的裝置或最快的網路的人付出的代價最大，當事情沒有按計劃那樣進行時，任何人都會感受到。

3 種不同的解決方案：

  • 純 MPA可實現最佳頁面載入效能的潛力。
  • “HTML框架”最適合導航到新位置。
  • “伺服器元件”最類似SPA體驗。

 

多頁應用程式 (MPA)

那麼我們回到 PHP 和 Rails 了嗎？不，我希望這不會讓任何人失望。每次我們都和上次不一樣。

雖然完整的伺服器重新載入對於許多站點來說效果很好，但我們已經習慣了能夠在 SPA 中保留客戶端狀態並進行更平滑的轉換的好處。

MPA是讓伺服器處理路由，實現最佳的頁面載入效能，但在瀏覽器中導航，大多數JavaScript框架可以自己生成一些靜態頁面，以保持低互動性的頁面快速和輕盈。

在2010年代初，我們曾經稱之為小工具的空間有了巨大的增長，但現在被稱為島嶼Islands。這些獨立的島嶼更有能力，因為它們可以通過最新的工具（如Astro、Slinkity和Iles）進行伺服器渲染和水化。

這是一種較粗略的方法，對許多網站來說是很好的，但我們已經看到在這一領域的更復雜的工具，從一開始就考慮到這一點，如Marko或Qwik在最大的電子商務解決方案中使用。像eBay的登陸頁面，報告顯示使用MPA這種技術可以減少80-90%的程式碼大小。

 

HTML Frames

這種方式攔截所有的連結點選或表單提交，並禁用預設行為，然後請求螢幕的新位置，並在完成後替換<body>的內容。最明顯的是Turbo，作為Rails的Hotwire框架的一部分。

MPA是讓伺服器處理路由，但在瀏覽器中導航，保留我們的JavaScript應用狀態。當每個皮膚panel 載入時，我們對其進行水化，由於我們知道它只能在伺服器上渲染，所以上述所有的優化都適用。

然而，現在我們需要JavaScript來協調這種過渡。許多MPA框架如果支援懶惰水化，無論如何都會載入一個小的啟動載入器，但在純MPA中，有可能不需要任何執行時。

雖然這種方法不那麼重，但仍然不像SPA的順利。

從伺服器上載入HTML並替換原來的內容可能會保證應用的狀態，但在DOM中沒有任何當前滑鼠所在焦點、沒有動畫、沒有播放器在視訊標籤上的位置，等等。這就給我們帶來了下一個問題。

 

伺服器元件

伺服器元件就像MPA一樣，只不過你需要回到伺服器：將頁面的靜態部分 "重新渲染 "為VDOM，並讓瀏覽器接收這些變化。儘管客戶端元件被保留了下來，而且靜態HTML中從未改變的部分也沒有被替換，但我們本質上是在談論一種路由正規化。

當你點選一個連結時，它被攔截，伺服器元件的端點負責處理請求，返回新的VDOM以進行差異比較。當你執行改變資料時，更新頁面上的資料時，整個頁面在伺服器上被重新渲染，新的VDOM表現被送回來。這很像你用MPA做的一個經典的表單帖子。

每次伺服器重新渲染都要傳送大量的資料，還也需要更多的協調工作。你需要在瀏覽器中建立一個框架。所以這種方法不一定能讓你得到最快的頁面載入。但它有同樣的能力來消除不必要地傳送到瀏覽器的巨大百分比的元件程式碼。

 

分析

這是 3 種不同的解決方案，這不僅僅是一個取代另一個：

“純 MPA” 具有實現最佳頁面載入效能的潛力；“HTML框架”是 3 種框架中最適合導航到新位置的；只有“伺服器元件”才有可能與我們今天擁有的單頁應用程式體驗無法區分。

但是所有 3 種方法都共享相同的“導航應該如何工作”的模型。它是來自伺服器的整頁。

本質上，與其嘗試為瀏覽器帶來一堆昂貴的快取邏輯，不如採取refetch first 的心態。重新載入整個頁面進行渲染其實沒有那麼糟糕，而且無需一堆額外的客戶端程式碼即可確保頁面資料的一致性。

你見過領先的 GraphQL 客戶端的規模嗎？壓縮後大約 40kb。只需將它和 React 放在同一個頁面上，您就可以在編寫一行程式碼之前超過任何對效能至關重要的站點的預算。

 

MPA 作為一項技術保持不變，並繼續提高它們的能力，以更好地進行部分水合、更智慧的延遲載入、更動態的交付（流式傳輸）。

“HTML框架”是一箇中間步驟。隨著“伺服器元件”的新方法出現，尤其是非 VDOM 方法，我們將看到它們被替代。

理想的方法是讓伺服器元件既能夠提供細粒度更新的能力，又能夠為新渲染的東西傳送 HTML。對於初始頁面載入或任何大型導航來說，HTML渲染會更快。支援混合/部分格式可能是一個問題。

 

相關文章