What is Jamstack?

給初學者的 Jamstack 介紹

從早期網頁開發說起

瀏覽器已經不再是簡單的文件閱讀器,而是一個完整的平台,用戶期望網頁變得像應用程式一樣使用起來絲滑流暢

早期的網頁一切都非常的簡單,就是提供靜態的文件,並且透過外連一些簡單的 CSS 和 JavaScript 來豐富整個網頁的外觀與行為,但隨著時間和需求演進,網頁開發者需要「動態的生成」頁面中的資料並提交給用戶,傳統只提供簡單的靜態網頁已經無法滿足用戶需求,因此開發者需要動態的依照前端的請求來為用戶生成相對應的頁面,但這麼做將導致導致開發上的複雜度大大提升。

  • 伺服器每次都需要為請求建構新頁面 (效能差、難快取)
  • 對爬蟲不友善 (SEO 差)
  • CMS (管理網站內容的系統)、資料庫、後端、前端相互綑綁 (難以擴展維護)

隨著工具與環境的成熟,開發者開始將網頁的前後端分離,透過 API 來串接資料,並且透過前端框架來渲染資料,像是 MERN (MongoDB, Express, React, Node.js) 或是 MEAN (MongoDB, Express, Angular, Node.js),雖然達成了前後端分離,但是仍然需要伺服器來為用戶建構頁面,因此 Jamstack 就是為了解決這個問題而誕生。

Jamstack 主動將傳統後端的工作轉移移到前端,舉例來說:「將頁面事先用靜態生產器(Static Site Generator) 預先生成(Pre-rendering)靜態頁面,並透過部屬 CDN 建構可靠快速的網站」、「將動態的內容透過 API 串接個別的服務,造就乾淨獨立的架構」整體來說使用 Jamstack 架構的網頁實現了簡單可擴充的需求,所以說 Jamstack 其實就是以下三個部分:

JavaScript

Javascript 是現代網頁互動的核心,在 Jamstack 中,透過 JavaScript 來加載與展示動態內容。

API

API 是「應用程式介面」,簡單來說就是透過串接第三方服務來取得資料。像是 Firebase 或是 AWS,將資料儲存於雲端,並且透過 API 串接的方式來銜接兩者。

Markup

在 Jamstack 中,Markup 指的是 Jamstack 應用程序的內容。需要注意的是,這裡使用標記的含義比較廣泛,不僅指文本內容,還包括應用程序的資源,例如圖像。

總結

儘管 Jamstack 有許多的優勢,也是大環境的趨勢,我們仍須熟知它的優缺點,才能更好的運用它。

你應該使用 Jamstack 的原因

  • 好開發:由於各項服務都是獨立的,因此職責絕對的清晰。
  • 更便宜高效:你可以將 Jamstack 網站放置在 CDN 上,藉由快取加快內容傳遞與降低成本。
  • 安全:由於是靜態頁面,因此不需要擔心針對後方伺服器、資料庫的攻擊。

你不應該使用 Jamstack 的原因

  • 建構時間長 - 由於所有的頁面都事先在伺服器上渲染出來,過於大量的網頁建構將會花費大量的時間,增量靜態生成(Incremental Static Generation)🔗 通常是該問題的解方。
  • 只適合較靜態網站 - 由於 Jamstack 架構的限制,它可能無法滿足某些應用程式的需求。如果需要動態生成大量的頁面,使用其他架構來滿足需求會更為妥當。

參考資料