淺談 Jamstack
更新於 發佈於 閱讀時間約 7 分鐘
本文解釋本人對 Jamstack 與相關的技術名詞以及與傳統 CMS 架構的異同的理解。
我們從已經為人熟知的 CMS 開始說起。
CMS
CMS（內容管理系統，content management system）就是一般認知的網站系統，所謂的「內容」泛指網頁本身、網頁內的欄位（標題、作者、內文、品名、金額、標籤、時間等等等等等）、網頁的階層關係、網頁的外觀與樣式，CMS 不是只用於描述形像類網站，也包含功能型網站，因為不論何種網站，都只是內容、外觀、業務邏輯上的差異，所以它們的管理系統一概以 CMS 泛稱之。
最知名的 CMS 就是那 WordPress，以數量龐大的外掛與佈景著稱，常用於架設 blog、形像、購物網站。WordPress 通常搭配 MySQL 一起工作，同時 WordPress 也管理了從資料庫、後端管理以及前端網頁的全部工作，而與之對比的就是 headless CMS。
Headless CMS
Jamstack 的 J A M 分別代表 JavaScript、API、Markup，其實可以簡單的理解為前後端分離的架構，在 Jamstack 這種前後端業務分離下的 CMS，只專注於內容的管理，並透過 API 與前端溝通，CMS 並不涉及前端頁面的呈現，這種不管前端外觀的 CMS，我們稱為 headless CMS，就是沒頭沒臉的 CMS，只專注於內容的管理與資料的供應。
用 headless CMS 有幾項好處：
- 減少前後端的耦合程度，降低 CMS 系統的複雜度。
- 可以有多種前端，web、app 都可以，因為前端是透過 API 與 headless CMS 溝通，所以一個 CMS 可以供給多平台前端，滿足現今多元平台的市況。
- 易於橫向擴展，當單台 headless CMS 遇到性能滿載時可搭配雲端平台的機制動態擴展應付突發流量。
也有缺點：
- 開發人員必須熟悉至少兩套框架：headless CMS 與前端框架。
Headless CMS 以整體專案的角度來看系統的複雜度反而是變高的，有可能要分成兩組人作業，並且必須考慮到 API 的 schema 規格，反之在 WordPress 下幾乎完全不用考慮前後端資料拋接的事情（但有客製化外掛的話還是會碰到）。
為何前後端分離？
大前端時代已經是不可擋的趨勢，在前端框架大爆發的時代，幾乎都已經把能搬的業務邏輯都搬到前端去做，後端就專注於管理資料與提供 API 給前端用而已，而再往前追朔其實也就是因應 iPhone 帶起的行動 app 的趨勢，開發者為了能夠有統一的 API 供應多平台使用，傳統的統包型 CMS 逐漸被 Jamstack 風格的 headless CMS 所取代。
再回頭看 WordPress，雖然 WordPress 本身不是 headless CMS，但 WordPress 是有提供 API 的，所以想拿 WordPress 做為純後端其實是可行，但問題是 WordPress 自己的前後端高度耦合，難以拆分，所以喜歡 Jamstack 風格的開發者就不太喜歡拿 WordPress 做為後端系統使用。
相較於 WordPress，另外一套較年輕的 Ghost 也是知名的 CMS，Ghost 最初也是設計成全包型 CMS，在 Jamstack 興起後，或許是歷史包袱不像 WordPress 那麼重的關係，Ghost 逐漸把前後端的耦合度降低，目前 Ghost 也可以是 headless CMS，用戶可以自由選擇要用 Ghost 自己的前端框架或是其它的前端框架。
不論是 WordPres 或是 Ghost，它們都是需要搭配資料庫才能運作的系統，而資料庫系統本身也會佔用主機資源（$$$），所以對於小規模專案的需求又有人發展出不用搭配資料庫的 CMS，這樣的 CMS 被稱為 flat-file CMS。
Flat-file CMS
望文生義，所謂的 flat-file CMS 即用檔案當資料源的 CMS，相較於 WordPress、Ghost 必須搭配資料庫使用，flat-file CMS 的內容都是以檔案的形式存在於主機內，檔案格式通常會是 Markdown 或 JSON 或 HTML，當然這些檔案內的 schema 也是要經過適當定義的才能被 CMS 正確讀取。
其實 flat-file CMS 與 WordPress 相當類似，只有在資料儲存層上有差異。
一些 flat-file CMS 的特點：
- 資料以檔案方式儲存，不以資料庫儲存。
- 通常不會是 headless CMS，而是像 WordPress 那樣是前後端全包型的 CMS，因為檔案作為資料源不比資料庫，難以提供高效能的 API 服務（此點非絕對）。
- 雖然資料源是檔案，但最終前端頁面也是由檔案＋模板動態產生的，所以雖然主機不用跑資料庫，但還是要跑 PHP 或其它語言程式。
Headless CMS & flat-file CMS
綜合前文所述，flat-file CMS 的「flat-file」是對底層資料儲存面的形容；而 Jamstack 風格的 headless CMS 的「headless」是對前端模組的形容，是不同面向的描述，因此兩者之前並不存在比較關係，容易讓人（我）疑惑的原因只是它們都剛好在同個年代興起而已。
Headless CMS 沒有前端模組，它的資料儲存可以是用資料庫或檔案；flat-file CMS 沒有用資料庫，它可以有前端模組或沒有前端模組。
Static site generator
來到最後一關，static site generator，靜態網站產生器，簡稱 SSG。
SSG 更單純，SSG 只負責把模板檔和內容檔（通常是 Markdown 或 HTML）組合起來並輸出成美美的 HTML 檔案，當然還有一些額外的工作，例如幫我們產出 sitemap.xml、依我們設計的目錄結構去產生、圖片縮放、幫我們更新索引清單等周邊工作。
因為 SSG 最後產出的都是靜態的 HTML 檔案，因此只要放到某個最便宜的網頁空間即可讓人訪問。
更複雜一點的 SSG，把前端框架摻進來做 SSG，就幾乎有無限的可能性，即便是靜態檔案，只要透過 JavaScript 與瀏覽器的 Web API 再加上網路上一大堆 API-based 的服務，即可變出各種花式 web app，什麼 blog、形象網站、購物站都沒問題，靜態檔案也可以跑的很動態。
Jamstack
回頭談主題 Jamstack，headless CMS 意味著 Jamstack 前後端分離之後端；SSG、前端框架意味著 Jamstack 前後端分離之前端，而後端其實也不一定要自己架 CMS，拿網路上現成的 API-based 的服務作為後端也是可行的，甚至像 blog 或形像網站，本身並不需要後端的存在。
另外一個個人觀點是，在大前端時代，前後端分離已是常態，Jamstack 這個用於描述這種分離後的架構的詞彙也會隨著成為常態而消失，就像以前電腦剛能播影音的時代，微軟定義了 MPC 的規格，然而隨著多媒體播放成為常態，又有誰會特地說自己的電腦是「多媒體電腦」呢？:p
為什麼會看到廣告
留言0
查看全部
你可能也想看
Google News 追蹤
隨著理財資訊的普及，越來越多台灣人不再將資產侷限於台股，而是將視野拓展到國際市場。特別是美國市場，其豐富的理財選擇，讓不少人開始思考將資金配置於海外市場的可能性。
然而，要參與美國市場並不只是盲目跟隨標的這麼簡單，而是需要策略和方式，尤其對新手而言，除了選股以外還會遇到語言、開戶流程、Ap
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
使用靜態檔案下載 Bootstrap 的原因主要有以下幾點：
客製化：當你下載了 Bootstrap 的靜態檔案，你可以根據自己的需求來修改這些檔案。例如，你可以改變預設的顏色、字型大小、間距等，使其更符合你的網站風格。這是直接使用 CDN 所無法做到的。
效能優化：如果你的網站只使用 Boot
在當今數位時代，「雲端平台」已成為科技領域的一個熱詞。那麼，雲端平台究竟是什麼？它如何改變我們的生活和工作方式？讓我們一起來探討這個重要的主題。
雲端平台的定義
雲端平台，是指通過互聯網提供各種計算資源和服務的基礎設施。這些資源包括伺服器、儲存空間、數據庫、網絡和軟體應用等。用戶可以根據
CMS是一種系統化的網站後台，提供管理彈性、SEO友善、客製開發、分權管理、安全穩定的優勢，適用於個人品牌網站、企業網站和電子商務平臺。本文介紹CMS在網站管理中的角色，以及使用CMS對網頁設計的幫助，並提供延伸閱讀資源。
WordPress是一個強大、靈活且易於使用的內容管理系統(CMS)，免費開源並擁有龐大的開發者社區。其具有多媒體支持、SEO友好、安全性強、用戶權限管理等特點。這些特性使得WordPress成為構建現代專業網站的優秀選擇。
靜態網頁和動態網頁在功能、內容和互動性方面有所不同。靜態網頁通常用於展示公司網站、部落格文章或商品頁面等靜態內容，而動態網頁則用於用戶註冊、登錄、購物車等互動功能。
這篇文章探討了WordPress在大品牌網站設計中的應用以及相關的背景和考慮因素。透過分析開源與品質、大品牌的需求、大品牌的案例以及安全性和維護等方面，提供了對於WordPress在大品牌中使用的觀點和見解。
如果你正在考慮架設網站，那麼你可能已經聽說過WordPress網站。在現今這個時代，超過40%的網站都是使用WordPress製作的。相比之下，使用客製化手寫網站的企業就少得多。那麼，WordPress真的好用嗎？手寫網站又有哪些優點呢？在本文中，我們將比較這兩種架站方式，分析它們各自的優缺點，並引
隨著理財資訊的普及，越來越多台灣人不再將資產侷限於台股，而是將視野拓展到國際市場。特別是美國市場，其豐富的理財選擇，讓不少人開始思考將資金配置於海外市場的可能性。
然而，要參與美國市場並不只是盲目跟隨標的這麼簡單，而是需要策略和方式，尤其對新手而言，除了選股以外還會遇到語言、開戶流程、Ap
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
使用靜態檔案下載 Bootstrap 的原因主要有以下幾點：
客製化：當你下載了 Bootstrap 的靜態檔案，你可以根據自己的需求來修改這些檔案。例如，你可以改變預設的顏色、字型大小、間距等，使其更符合你的網站風格。這是直接使用 CDN 所無法做到的。
效能優化：如果你的網站只使用 Boot
在當今數位時代，「雲端平台」已成為科技領域的一個熱詞。那麼，雲端平台究竟是什麼？它如何改變我們的生活和工作方式？讓我們一起來探討這個重要的主題。
雲端平台的定義
雲端平台，是指通過互聯網提供各種計算資源和服務的基礎設施。這些資源包括伺服器、儲存空間、數據庫、網絡和軟體應用等。用戶可以根據
CMS是一種系統化的網站後台，提供管理彈性、SEO友善、客製開發、分權管理、安全穩定的優勢，適用於個人品牌網站、企業網站和電子商務平臺。本文介紹CMS在網站管理中的角色，以及使用CMS對網頁設計的幫助，並提供延伸閱讀資源。
WordPress是一個強大、靈活且易於使用的內容管理系統(CMS)，免費開源並擁有龐大的開發者社區。其具有多媒體支持、SEO友好、安全性強、用戶權限管理等特點。這些特性使得WordPress成為構建現代專業網站的優秀選擇。
靜態網頁和動態網頁在功能、內容和互動性方面有所不同。靜態網頁通常用於展示公司網站、部落格文章或商品頁面等靜態內容，而動態網頁則用於用戶註冊、登錄、購物車等互動功能。
這篇文章探討了WordPress在大品牌網站設計中的應用以及相關的背景和考慮因素。透過分析開源與品質、大品牌的需求、大品牌的案例以及安全性和維護等方面，提供了對於WordPress在大品牌中使用的觀點和見解。
如果你正在考慮架設網站，那麼你可能已經聽說過WordPress網站。在現今這個時代，超過40%的網站都是使用WordPress製作的。相比之下，使用客製化手寫網站的企業就少得多。那麼，WordPress真的好用嗎？手寫網站又有哪些優點呢？在本文中，我們將比較這兩種架站方式，分析它們各自的優缺點，並引