Jamstack，下一代Web建站技術(shù)棧？

時(shí)間：2022-08-11 14:39:02 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2022-08-11 14:39:02 來源：網(wǎng)站運(yùn)營

Jamstack是什么？

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

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

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

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

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

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

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

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

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

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

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

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

Jamstack有什么優(yōu)勢(shì)？

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

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

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

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

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

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

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

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

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

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

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

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

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

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

特性	Jamstack	純靜態(tài)網(wǎng)站	傳統(tǒng)動(dòng)態(tài)網(wǎng)站	單頁應(yīng)用（SPA）	SSR應(yīng)用
使用CDN全站加速	?	?	?	?
方便的內(nèi)容管理	?	?	?	?	?
SEO友好	?	?	?	?	?
首屏渲染速度	?	?	?	?	?
不需要在線服務(wù)	?	?	?	?	?
安全性	?	?		?

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

Jamstack的商業(yè)價(jià)值

在國外的電商行業(yè)，Headless Commerce（無頭電商）是一個(gè)非?；鸬母拍?。

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

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

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

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

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

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

尾聲

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

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