Jamstack是什么?

Jamstack 指的是一套用于構(gòu)建現(xiàn)代網(wǎng)站的技術(shù)棧，可能過去的一些文章通常會把它們理解為 JavaScript、APIs、Markup，但其實現(xiàn)在這個概念已經(jīng)被擴大了，Jamstack 的官網(wǎng)上將它的核心概念歸納為 Pre-rendering、Enhancing with JavaScript、Supercharging with services。

For fast and secure sites | Jamstackjamstack.org

當(dāng)然掉書袋沒什么意思，用人話來解釋的話，當(dāng)下絕大多數(shù) Jamstack 網(wǎng)站，都是這樣的技術(shù)棧：

1. 使用網(wǎng)站生成器預(yù)渲染整個網(wǎng)站

整個網(wǎng)站在部署前，會被網(wǎng)站生成器(SSG, Static Site Generators)構(gòu)建和優(yōu)化為一系列的靜態(tài)頁面和靜態(tài)資源，這樣整個網(wǎng)站可以被托管在 CDN 上，加載速度得到最大程度地優(yōu)化，安全性也得到保障。

這里的網(wǎng)站生成器包括但不限于：Gatsby、Hugo、Jekyll、Eleventy、NextJS……

2. 使用 Headless CMS(無頭 CMS)管理動態(tài)內(nèi)容

如果想要網(wǎng)站承載動態(tài)內(nèi)容，那么可以接入各種 Headless CMS(無頭 CMS)，這些 CMS 系統(tǒng)會對外提供 API，網(wǎng)站生成器可以調(diào)用這些 API 拉取數(shù)據(jù)，將動態(tài)數(shù)據(jù)渲染成為靜態(tài)頁面。

這里的無頭 CMS 包括但不限于：Ghost、Strapi、Netlify-CMS、TinaCMS……

3. 使用 HTTP API 增強網(wǎng)站的功能

在登錄注冊、評論框等需要后端支持的能力上，Jamstack 網(wǎng)站通常會使用微服務(wù)提供的 HTTP API，或者一些第三方的 BaaS(后端即服務(wù))能力。

除了以上三個主要特點以外，Jamstack 的網(wǎng)站通常還會有下面的特性：

• 全站托管于 CDN 上
• 原子化發(fā)布(每次發(fā)布都是一次全量、原子性的發(fā)布)
• 靈活的文件緩存策略
• 基于 Git 的全自動構(gòu)建、部署流程

Jamstack有什么優(yōu)勢?

1. 相比于純靜態(tài)網(wǎng)站

純靜態(tài)的網(wǎng)站很難承載動態(tài)的內(nèi)容，內(nèi)容改動通常都是要直接修改頁面的代碼，這對于內(nèi)容管理人員(很可能是非技術(shù)人員)來說非常不友好。

而 Jamstack 的網(wǎng)站，通常會使用無頭 CMS 來將內(nèi)容管理抽離出去，內(nèi)容管理人員可以直接在這些 CMS 系統(tǒng)的 UI 界面上進行內(nèi)容修改，然后觸發(fā)整個網(wǎng)站的重新預(yù)渲染，以及部署。

2. 相比于傳統(tǒng)動態(tài)網(wǎng)站

這里的“傳統(tǒng)動態(tài)網(wǎng)站”指的是用 PHP、Ruby On Rails、JSP 甚至更古老的 CGI 構(gòu)建的網(wǎng)站，以及基于這些技術(shù)產(chǎn)生的建站工具比如 WordPress、Drupal 等等。

這些傳統(tǒng)網(wǎng)站的劣勢在于，它們在運行時都需要一個實時在線的服務(wù)端，這些服務(wù)端負責(zé)處理請求、渲染頁面，這就很大程度上降低了服務(wù)的可伸縮性和穩(wěn)定性(想象一下，你遷移擴容一個在線的 WordPress 網(wǎng)站有多么麻煩)。

Jamstack 由于是直接使用 CDN 分發(fā)靜態(tài)的頁面，完全不需要渲染頁面的服務(wù)，網(wǎng)站的伸縮性、穩(wěn)定性可以得到最大的保障。

3. 相比于單頁應(yīng)用(SPA)

大概五年前，隨著各種前端框架的成熟，越來越多的業(yè)務(wù)邏輯遷移到了前端處理，這也就誕生了 SPA 的概念，也就是整個網(wǎng)站的 UI 層，由瀏覽器端來完全接管。得益于 HTML5 和現(xiàn)代瀏覽器的一系列特性，這樣的做法可以保證最好的用戶體驗。

但是 SPA 最大的問題在于它對 SEO 不友好，因為 SPA 的頁面內(nèi)容都是靠瀏覽器異步獲取、渲染的，雖然 Google 為首的大多數(shù)搜索引擎漸漸地支持爬取 SPA 的內(nèi)容，但是這依然是一個隱患。另外，由于 SPA 需要異步加載數(shù)據(jù)，首屏內(nèi)容需要在在加載、運行 JS 之后才能看到，也給用戶打開網(wǎng)站的體驗帶來影響。

而 Jamstack 的頁面本質(zhì)上都是托管在 CDN 上的靜態(tài)頁面，搜索引擎可以直接爬取這些靜態(tài)內(nèi)容，首屏與靜態(tài)網(wǎng)站一樣，可以直接展示內(nèi)容，而不需要等到加載運行 JS 之后。

4. 相比于 SSR 應(yīng)用

目前市面上的幾大前端框架都支持了服務(wù)器端渲染，也就是 SSR 的概念，這些 SSR 技術(shù)也成為了 Jamstack 的基礎(chǔ)之一。但是典型的 SSR 應(yīng)用和傳統(tǒng)動態(tài)網(wǎng)站一樣，都是需要一個在線的服務(wù)來渲染頁面，同樣會有運維和安全性上的風(fēng)險。

Jamstack 從技術(shù)角度上講，可以認為是 SSR 技術(shù)的進階，也就是提前用 SSR 預(yù)渲染大部分頁面，然后將這些頁面部署在 CDN 上，隨后根據(jù)網(wǎng)站的數(shù)據(jù)變化，重復(fù)預(yù)渲染、部署即可。

當(dāng)然，Jamstack 也不是萬金油，不可能完美適應(yīng)所有場景，Jamstack 最適合一些內(nèi)容更新不太頻繁的網(wǎng)站(比如新聞、電商、文檔)。它不適合 Feeds 流、聊天室、論壇、個性化推薦這樣高度動態(tài)化的網(wǎng)站，以及郵箱、編輯器這樣偏重型的 Web 應(yīng)用。

Jamstack的商業(yè)價值

在國外的電商行業(yè)，Headless Commerce(無頭電商)是一個非?；鸬母拍睢?/p>

所謂的無頭電商，就是把用戶端的 UI 展現(xiàn)和整個電商后臺服務(wù)進行解耦，去除掉了 UI 層，也就是“頭”，畢竟每個公司都不想自己的網(wǎng)站、購買體驗和別人一樣。

無頭電商只對外暴露一系列的 API，讓客戶公司可以使用這些 API 構(gòu)建自己的電商網(wǎng)站。舉一些具體的例子，比如 Salesforce 正在推行的 Open Commerce API，逐漸成為現(xiàn)在電商開放 API 的標(biāo)準(zhǔn)。換句話說，這個做法很類似現(xiàn)在國內(nèi)很多公司在推行的“中臺化”、“大中臺小前臺”的概念。

所以這和 Jamstack 有什么關(guān)系呢?

你會發(fā)現(xiàn)，Jamstack 推行的這一套技術(shù)棧，包括預(yù)渲染動態(tài)數(shù)據(jù)的靜態(tài)頁面、無頭 CMS、微服務(wù) HTTP API，幾乎和無頭電商的理念完全一致，或者說，無頭電商就是 Jamstack 一個最貼切的應(yīng)用場景。

在前段時間 Vercel 舉辦的 Next.js Conf 上，主要贊助商除了 AWS、Github、Firebase 這樣的云平臺以外，大部分都是適用于 Jamstack 的第三方 API 提供方、或者一些無頭 CMS，這也從側(cè)面體現(xiàn)了 Jamstack 目前在國外的生態(tài)繁榮。

但是在國內(nèi)市場上，或許不那么樂觀：國內(nèi) Web 網(wǎng)站本身就處于一個很尷尬的狀態(tài)，各大公司的主要業(yè)務(wù)都是以移動端 App 為主要入口，Web 網(wǎng)站缺少流量來源，或許只有一些特性類型的業(yè)務(wù)(比如新聞、電商網(wǎng)站)需要 Web 站點;電商市場方面，國內(nèi)大部分中小型公司都處于嚴重缺乏信息化的狀態(tài)，更多依賴于阿里、京東這樣的大平臺方提供的基礎(chǔ)系統(tǒng)，還遠遠沒有自建整套流程的需求，無頭電商也就無從談起。

尾聲

從技術(shù)角度上講，Jamstack 本質(zhì)是一種增強的靜態(tài)網(wǎng)站，它的出現(xiàn)很大程度上得益于各大云廠商提供的云上能力，包括更容易管控的 CDN/DNS、Serverless Function、DevOps 工具等等。

隨著國內(nèi)相關(guān)云計算基礎(chǔ)設(shè)施的成熟，Jamstack 在國內(nèi)幾家云平臺的支持程度也會慢慢提高，我們完全可以期待未來 Jamstack 部分替代傳統(tǒng)的 WordPress 等建站工具，變成新一代的建站技術(shù)棧。