JAMStack 簡介

發表於 分類於 Disqus：
JAMStack是什麼東西？

何為 JAMStack？

A modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup.

— Mathias Biilmann (CEO & Co-founder of Netlify)

由前3個英文字母組成：

  • JavaScript - 開發各種功能
  • API - 三方服務、後端 API
  • Markup 靜態頁面

簡單說就是前端頁面為純靜態頁面(不依賴後端渲染)、配合各種 CDN、後端微服務、Serverless function 來達成

雖然 stack 裡提到 JavaScript
但並非整套架構都只能用 JavaScript 才算數
更像是一種設計理念
重點在於前端頁面是靜態(pre-built)的，不必依賴後端處理

而頁面所須的各種資源，則透過 API 去取得

優點

  1. 高效能 - 因為網站內容都是靜態的純文件，載入速度相當快。還可以透過 CDN 再加速
  2. 高安全性 - 對外網站都是靜態頁面，所需的 API 透過三方服務(如三方登入)、雲端主機的 Serverless function，被突破的點就減少許多。不必自己費心管理一切
  3. 超便宜 - 因為只是純靜態頁面，託管服務幾乎優質又免費(如 GitHub Page、netlify)，就算付費也相當便宜！
  4. 好擴展 - 只是純靜態頁面，要在任何地方起一個服務迅速啟用，都是相當容易的事

前端主流框架的靜態頁面產生器 SSGs

目前三大主流前端框架都已經有各自的靜態頁面產生器(SSGs, Static Site Generators)可以使用
如
React.Js / NEXT.JS、Gastby.Js
Vue.Js 的 NUXT.JS
Angular / Scully

要記得的是
並非用框架做出來的網站，才符合 JAMstack
他只是一個設計理念

用最傳統的 jQuery(或純 js)、html、css 所開發出來的網站，也是所謂的靜態頁面
只要透過 API 拿到資料後，自己透過 jQuery(或純 js) 將頁面渲染出來即可！

參考資料

jamstack
JAMstack 到底是什麼巫術？