什麼是 JAMstack？

什麼是 JAMstack？

JAMstack 是一種前端 Web 開發方法（構建使用者與之互動的內容和介面）。它允許開發人員快速建立並有效地為使用者提供靜態網站。

在 JAMstack Web 應用程式中，會預先建立盡可能多的 HTML 並儲存在內容傳遞網路 (CDN) 中。不同於在伺服器端執行一個單一的後端應用程式來產生動態內容，此類應用程式的動態元件基於 API。理想情況下，這會帶來更快的使用者體驗和更簡單的開發人員體驗。

詞彙「JAMstack」代表什麼？

JAM 代表 JavaScript、API、Markup。

• JavaScript 是 Web 應用程式使用的程式設計語言
• API（應用程式程式設計介面）是一種從別人的程式或應用程式要求資料的方法
• Markup 是為瀏覽器提供格式化指令的代碼（HTML 和 CSS）

堆疊指的是將所有這些內容以一種方式結合起來，使開發人員能夠建置應用程式和網站。

JAMstack 網站或應用程式僅使用這三個元素構建而成。使用者看到的靜態網站是由 HTML 和 CSS 標記代碼構建的。JavaScript 用於任何必要的動態功能，以及呼叫 API。API 提供應用程式的後端。

假設 Bob 構建了一個提供歐洲足球比分更新的 Web 應用程式。Bob 建立了一個後端應用程式，該應用程式在他操作的伺服器上執行，並不斷檢查最新比賽的得分。當使用者開啟 Web 應用程式時，Bob 的伺服器會產生顯示這些分數的 HTML 頁面，然後將這些頁面傳送給使用者。但是，Bob 的 Web 應用程式有點慢：在使用者可以檢視這些頁面之前，他們必須等待後端應用程式執行、產生 HTML，以及等待 HTML 到達他們的裝置。

現在假設 Bob 使用 JAMstack 方法重建他的 Web 應用程式。他沒有編寫整個後端應用程式，而是建立了一系列輕量級的 HTML 頁面，並將其儲存在 CDN 中。當使用者開啟應用程式時，CDN 會立即將相應的 HTML 頁面交付給使用者，因為 CDN 比 Bob 的伺服器更接近使用者。該應用程式還呼叫 API 來填寫頁面上的實時足球比賽比分。Bob 的 Web 應用程式現在為使用者載入的速度非常快，從 Bob 的角度來看，編寫代碼來處理後端、伺服器端更新分數的工作的需求要少得多。

什麼是靜態網站？

靜態網站由一個或多個靜態網頁組成，這些靜態網頁是在瀏覽器中載入的 HTML 檔案，不管誰載入這些檔案，它們在瀏覽器中載入的方式都是一樣的。因為靜態網頁僅由 HTML 組成，不需要在瀏覽器中執行額外的代碼，它們可以非常快速地載入。（要查看 HTML 代碼的外觀，請在使用 Chrome 瀏覽器時以滑鼠右鍵按一下網頁，然後按一下「檢視頁面源代碼」。）

相比之下，動態網頁每次載入時都是不同的。為了提供更具互動性、個人化的使用者體驗，動態網頁會根據開啟頁面的使用者、頁面載入位置、一天中的時間以及一些其他變化的資料輸入而變化。載入動態網頁時，代碼必須在託管網頁的 Web 伺服器上或在使用者的瀏覽器中執行。這種對執行代碼的依賴會降低使用者體驗。

動態網頁並不是建立現代化使用者體驗的唯一方式。一個主要是靜態的 JAMstack 網站仍然可以透過偶爾產生新的靜態內容或呼叫 API 來填寫更新的內容，為使用者提供動態的個人化體驗。

JAMstack 應用程式如何處理後端功能？

在應用程式開發中，後端是在後台伺服器上執行的代碼。通常，使用者在使用網站或應用程式時並不知道後端發生了什麼。雖然 JavaScript 和標記決定了 JAMstack 應用程式向使用者顯示的方式，但它仍然需要後端功能才能運作。JAMstack 透過使用 JavaScript 呼叫 API 來處理這個問題。

使用 API 意味著 JAMstack 開發人員不必構建自己的後端應用程式。他們可以在現有 API 的基礎上建置他們的網站和應用程式。

當開發人員想要為應用程式構建自己的功能時，他們可以建立新的 API。API 可以在各種環境下重複使用，因此當開發人員為後端構建自己的 API 時，他們應該只需要構建一次該功能，以便在未來的應用程式中使用它。

JAMstack 與微服務有什麼關係？

使用 API 允許 JAMstack 開發人員對後端採取微服務的方式。在微服務架構中，應用程式的後端被分解為在命令上執行的更小的塊——就像 JAMstack 應用程式在必要時呼叫各種 API 一樣，但在其他情況下不需要後端支援。

也可以構建一個使用部分或完全無伺服器後端的 JAMstack 應用程式。無伺服器功能是按需執行的小型、可重複使用的代碼片段。但是，無伺服器架構通常需要開發人員對後端採取更加親力親為的方法，因為他們本質上是自己構建後端應用程式，而不是呼叫 API（儘管他們不必擔心佈建伺服器）。

使用 JAMStack 有什麼好處？

• 效能：JAMstack 應用程式中的幾乎所有內容都由從 CDN 提供的靜態 HTML 檔案組成。這是向終端使用者提供 Web 內容的最快方式。
• 可擴展性：如果應用程式是「可擴展的」，這意味著它可以很好地回應使用量的大幅增加。由於 JAMstack 前端速度快且後端輕量化，因此 JAMstack 應用程式通常具有極強的可擴展性。
• 更好的開發人員體驗：JAMstack 使開發人員能夠專注於構建引人注目的前端使用者體驗，而無需擔心後端或效能問題。

Cloudflare 使開發人員能夠構建可直接在 Cloudflare 全球 CDN 上託管的應用程式。深入瞭解 Cloudflare Pages，這是我們用於構建靜態網站的 JAMstack 平台。您還可以深入瞭解有關使用 Cloudflare Pages 部署 Gatsby 網站、Hugo 網站、React 應用程式以及更多應用程式的資訊，並觀看分析公司 Redmonk 提供的 Cloudflare Pages 概觀影片。