了解 JAMstack 的意義以及這組技術的優勢

你在過去幾年中一定聽過 JAMstack 這個詞語。

JAMstack 是一組技術，結合使用以實現目標，如果你熟悉 LAMP 和 MEAN 的話，你可能已經知道了。

JAMstack 是什麼意思？

JAM 表示 JavaScript、API 和 Markup。

它描述了在創建網絡應用程式和網站時具有以下特點的趨勢：

  • 有一個“愚蠢”的網絡伺服器（或者CDN），傳送運行應用所需的 HTML，通常是使用靜態站點產生器生成的。HTML 不是在伺服器上生成。
  • 應用程式可以載入一些 JavaScript，從 API 中接收數據。頁面互動，如導航，可以導致從 API 獲取更多數據。認證也是通過 API 完成的。

這種新的方法是一種新的方式，與傳統的方式不同：

  • 傳統網站提供應用程序中已有的內容（如靜態站點）。
  • 基於 CMS 的網站從後端的數據庫中加載信息。
  • 使用任何種類的後端語言進行服務器渲染的應用程式。

它也不同於具有服務器渲染部分的客戶端渲染網站（例如使用 React 構建）。JAMstack 完全不涉及服務器渲染。

使用 JAMstack 的優勢是什麼？

  • 它快速。HTML 已經生成並且網絡伺服器只需提供它，而無需進行從數據庫查找數據或為每個請求生成頁面 HTML 等任何後端操作。它可以通過 CDN（內容傳遞網絡）輕鬆提供。
  • 它高效。由於沒有後端，所以沒有瓶頸（例如沒有數據庫）。
  • 它更便宜，因為通過 CDN 提供資源比通過後端伺服器提供資源要便宜得多。
  • 它更安全，因為後端僅通過 API 公開。

傳統的動態服務器渲染網站應用程序的方式（如 WordPress、Laravel 和 Rails）在許多情況下正被一種較輕的方式所取代。

一個典型的 WordPress 網站在每次頁面加載時可能對數據庫進行30-100次請求，這取決於安裝的插件數量。除非頁面被大量緩存，否則當一個 WordPress 網站在 Hacker News、Reddit 或任何其他大型網站上變得流行時，你會看到一個空白頁面-這意味著伺服器上發生了故障，因為該網站無法應對所有的流量。這往往是一個失去的機會，因為當網站以其最高的流行度時它無法運作。

相比於這些情況，提供一個靜態 HTML 頁面要有效得多，並且在 HTML 載入後可以根據需要仍然獲取動態數據，使用獨立的 API 呼叫。

有哪些技術可以用來構建 JAMstack 應用程式？

以及其他更多的技術。

JAMstack 可以用於什麼？

許多應用程式可以被歸納為 JAMstack 範疇，且可能性是無限的，範圍從簡單的博客到電子商務網站（例如使用 Snipcart）再到更複雜的網絡應用程式。

我的博客就位於 JAMstack 範疇內。所有的 HTML 在部署時生成，並且沒有其他的操作。