前端架構之 JAMStack

什麼是 JAMStack

JAMStack（JAM 表明JavaScript，API 和Markup）是一種使用Static Site Generators(SSG) 技術、不依賴 Web Server 的前端架構。

它的核心是：不依賴 Web Server。

這看起來和把一個靜態網站部署到文件服務器沒什麼區別。我理解，JAMStack = 現代 SSG 框架 + DevOps + Serverless，是一種「究極」的先後端分離。

激進的說，「Static is the new dynamic」。

一種有趣的比喻是：「CDN 優先應用程序」。

JAMStack 好在哪

1. 高性能：因爲網頁是靜態生成的，沒有額外的網絡數據請求，它的Time to first byte(TTFB)性能是最佳的（由於不涉及後端、數據庫等等）。
2. 易部署：由於 JAMStack 不依賴 Web Server，部署就僅僅是把生成的網頁放到CDN就能夠了。
3. 強安全：一樣由於不依賴 Web Server 的緣由，就致使 JAMStack 網站的攻擊面很小。
4. 易開發：JAMStack 因爲其特性，開發也極其簡單，不強依賴後端，開發、測試僅僅是部署到一個靜態文件服務器便可。如今「三大框架」都有相應的 SSG 方案，學習成本不高。

---

對比 Client Side Rendering（CSR），SSG 的 TTFB 有明顯的優點；同時因爲提早渲染，SEO 也更友好。

對比 Server Side Rendering（SSR），SSG 部署簡單，直接放到 CDN 便可，不依賴 Node Server 動態渲染。TTFB 也優於 SSR。

---

Next.js的做者之一Guillermo Rauch提到，因爲 JAMStack 的易部署特性，給整個前端的開發測試流程帶了翻天覆地的變化：「The Deploy URL, the Center of Gravity」，即在開發、測試、驗收等等的流程中，核心是圍繞 URL。

• UX 想看到如今開發的網頁效果，開發只須要部署到一個暫時的 URL，而後把它發給 UX 就能夠了；
• 多個 feature 分支，測試均可以在本身獨立的 URL 中實時看到效果；
• E2E 測試、用戶測試也獨立在一個 URL 中；
• 等等...

如何實現 JAMStack

如今「三大框架」都有相應的 SSG 方案，既知足了多樣化、複雜化的前端開發須要，又能簡單的生成靜態網頁：

1. Next.js是基於 React 的 SSR/SSG 框架。
2. Scully是基於 Angular 的 SSG 框架。
3. VitePress是 Vue 官方推出的 SSG 框架。

部署方面有Vervel、Netlify、騰訊云云開發等等。

Ledge項目的實踐

Ledge（源自 know-ledge，意指承載物）知識平臺是基於咱們所進行的一系列 DevOps 實踐、敏捷實踐、精益實踐提煉出來的知識體系。

Ledge 網站使用 Angular 開發。做爲一個類 Wiki 型的網站，它使用 Markdown 做爲編寫內容的語言，使用Ledge Framework動態的將 Markdown 轉換爲 HTML。這就涉及到，若是轉換過程在瀏覽器進行，勢必致使性能的降低，和對 SEO 的影響。

因此咱們選擇了Scully做爲 SSG 框架，在 build 階段依據路由將內容提早轉換爲 HTML 頁面：

項目的開發部署流程

各方面性能都有了大幅提升：

對比 JAMStack 和 CSR