大家好，很高興又見面了，我是"前端進階"，由我帶着大家一起關注前端前沿、深入前端底層技術，大家一起進步，也歡迎大家關注、點贊、收藏、轉發！
JAMstack vs SSG
前言
靜态網站生成器SSG是一種通過擷取模闆并将内容和資料合并到其中來建構靜态網頁的工具。模闆定義了網頁的結構，内容和資料可以包括菜單項、站點副本、部落格文章等。SSG 在建構過程中擷取資料并将其添加到模闆中并呈現靜态網頁。然後，這些頁面被托管并在請求時提供給用戶端。 SSG 的一些常見應用包括商業手冊網站、投資組合、部落格、線上雜志、文檔等。
而JAMstack 是一種獨特且越來越流行的建構網站和 Web 應用程式的方式。 JAMstack 中的 JAM 代表 JavaScript、API 和 Markup，但 JAMstack 的功能遠不止這三種技術的總和。 下文将圍繞為什麼需要SSG？什麼是JAMstack 應用程式？為什麼需要JAMstack 應用程式？等多個次元進行展開。
1.為什麼需要SSG？
回到2000年左右，網站開發比較簡單。 比如開發一個 index.html ，将其推送到伺服器，然後就有了一個網頁！ 可以是個人網站，又或是營銷網站。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>簡單的HTML</title>
</head>
<body>
<h1>這裡是一個簡單的HTML</h1>
</body>
</html> 但是，有時您需要的不僅僅是一個簡單的HTML。 比如一個電子商務網站，您希望客戶線上購買東西。 通常，這意味着您需要運作後端語言（如 PHP）來處理。
PHP一種後端語言
PHP 代碼通常會在伺服器上運作并處理這些互動。 它還會處理網站的不同請求，例如：
https://demo.com/about-us
https://demo.com/category/t-shirts
https://demo.com/products/awesome-t-shirt 當然，可能還有 100+ 個其他特定子位址，比如産品和類别頁面。 但是，您可以選擇不使用 PHP 或伺服器端語言，而隻為其中的每一個功能制作 1 個 index.html 頁面：
https://demo.com/about-us.html
https://demo.com/category/t-shirts.html
https://demo.com/products/awesome-t-shirt.html 但這意味着100 多個 index.html 頁面都在頁面上使用相同的 <header> 和 <footer> 等元素。
也意味着如果你想更新一部分内容，則必須在其他頁面做同樣的事情！
比如說，您的網站不是電子商務網站，隻是一個部落格網站！ 但它有 100 多頁來承載撰寫的文章。但是，您不需要在這些部落格文章上收費、存儲客戶資料等能力，而且隻是隻讀站點，很少更新。 此時，站點可能不需要PHP 或其他伺服器端語言，它可以隻是普通的 .html 檔案。
更新一個 .html 檔案的header意味着您必須對其他 99+ .html 檔案執行同樣的操作！ 這就是靜态站點生成器的用武之地！
2.2008 年SSG橫空出世？
SSG頁面生成流程，來源 https://www.vincentntang.com
SSG解決了大量修改 .html 檔案的維護問題。 2008 年的 Jekyll 是第一個受到廣泛關注的項目，你可以将它部署在 Github Pages 上。 它是用 Ruby 編寫的，Ruby 是另一種後端語言。
注意：Jekyll 不是第一個靜态站點生成器，卻是使SSG流行起來的站點
Jekyll 采用了一種獨特的方法來解決在部落格網站上修改如此多的 .html 檔案的問題。采用的思想是：為什麼不為部落格和頁面建立一個可重複使用的模闆呢？比如：
- Pos-web-template.html
- Page-web-template.html
Post-web-template.html看起來大概如下所示：
---
layout: default
---
{% include page-intro.html %}
<main id="main" class="page-content" aria-label="Content">
<article class="entry-wrap">
{{ content }}
</article>
</main> 這個HTML指定了頁面的布局，{{content}} 是呈現讀者閱讀的真正内容。是以，如果您更改布局的 HTML/CSS，它會更改所有部落格文章！ 頁面也是如此！
接着又出現了另一個問題：為什麼不以更簡單的方式編寫内容呢？ 比如markdown？ 并使用該markdown為 {{content}} 生成頁面。比如下面兩個markdown文檔：
- look-at-me-ma-my-first-article.md
- wtf-are-jamstackapps-and-ssgs.md
markdown檔案的大緻内容如下:
---
title: "Post: WTF are JAMstack Apps and SSGs?"
categories:
- Post Formats
tags:
- Post Formats
- readability
- standard
---
If you've ever read an article on JAMstack apps
or Static Site Generators (SSG), sometimes you're left............. 這就是一個靜态站點生成器！ 它會為您完成所有無聊、繁重的工作，是以您可以輕松生成 100 個 .html 頁面！ 如果有必要的話，還可以一次性修改所有文章的樣式！
Ruby：和PHP一樣，是一種後端語言
這是靜态站點生成器的關鍵。 它在 Ruby 或 PHP 等後端語言上運作。 但是，它隻會在您每次在網站上撰寫新文章或修改 CSS/HTML 時運作。 稱之為“建構時間”，這就是為什麼需要一段時間才能看到更改的原因。
想象一下，每次從站點添加/删除内容時，都需要重新打包！ 即使對沒有改變的産品頁面！ 如果有 100,000 多個頁面，重新打包可能需要數小時甚至數天！
靜态網站生成器SSG最适合隻讀網站。經驗法則是，如果您需要每天更新内容超過兩次，或者在網站穩定後需要頻繁更新， 您可能不應該使用靜态網站生成器。
3.JAMstack 應用程式
3.1 什麼是JAMstack應用程式？
From：https://www.vincentntang.com/wtf-are-jamstack-apps-and-static-site-generators/
JAMstack 應用程式表示 Javascript API 标記（API Markup）。 标記（它通常使用 markdown .md 檔案） API 指的是您是否想為部落格上的動态評論內建一個單獨的後端，例如使用 HTTP fetch方法。 Javascript 在這裡非常廣泛。
注意：所有 JAMstack 應用程式也是靜态站點生成器 (SSG)！但反之則不然。
JAMstack意味着可以在每個文章頁面上使用 Javascript。 大多數 SSG 确實開箱即用地支援這一點，但是将所有這些 jQuery 小部件散布在各處會變得有點很麻煩。
但在 2015 年迎來了一個新成員，即 React，React 改變了編寫前端應用的方式。React将後端與前端分離，用戶端僅通過 API 與後端通信。 這意味着您可以獲得所謂的用戶端路由以及其他諸多好處。
同樣的以電子商務網站為例， 假設有以下子網址：
- about-us.html
- category/t-shirts.html
- products/awesome-t-shirt.html
當使用者通路該站點時，您可以預加載所有這些路由！ 當使用者導航到該頁面時，頁面上的 <footer> 和 <header> 可能是相同的。 但是每次使用者導航到頁面的不同部分時重新渲染這些内容是沒有意義的。
React改變了編寫前端應用的方式
React 執行所謂的 tree-shaking 或 diff-rendering。 它找出實際需要更改的内容，僅呈現這些更改， 進而無需每次重新渲染 <footer> 和 <header> 。
當聽到為什麼 JAMstack 應用程式如此受歡迎時，将不得不說這是Javascript 的力量！ 這也是每篇 JAMstack 文章都提到的好處！ 它使用 React，一個單頁應用程式架構，可能完成所有可能的任務。
3.2 有哪些 JAMstack 工具？
Gatsby 建立在 React 、NodeJS 之上
Gatsby 建立在 React 、NodeJS 之上。
還記得前面談到靜态站點生成器嗎？ 修改 100 多個 .html 檔案是多麼痛苦？ SSG 如何使用 Ruby 或 PHP 等後端語言來擷取一些markdown檔案來為您生成所有這些 .html 檔案？
JAMstack 應用程式做同樣的事情！ 因為所有 JAMstack 應用程式都是 SSG！ Gatsby 也是如此，是以它是一個 JAMstack 應用程式！
Gatsby 使用 NodeJS 而不是 Ruby 或 PHP，并且它會在您每次對 markdown 檔案進行更改時建構它。 那麼 Gatsby（JAMstack 和 SSG）與 Jekyll（SSG）不同？
Gatsby 使用 NodeJS
Gatsby 使用 React，它具有前面提到的所有好處！ 它隻渲染變化的東西，與後端解耦，甚至可以預加載不同的頁面，是以渲染速度更快！ 從使用者的角度來看，這意味着網站更快，同時具有更好的 SEO 和性能。
SSG 和 JAMstack 應用程式還可以為您優化圖像！您可以手動運作圖像壓縮并将其轉儲到 public 或 dist 檔案夾中，然後由前端呈現！
4.本文總結
下面對SSG、JAMstack應用程式做一個簡單的總結：
- SSG 以最少的更新解決部落格等隻讀站點的痛點。 無需修改 100 個 .html 檔案，而是通過修改模闆并編寫 markdown，然後 SSG 會為您自動生成 .html 檔案，典型代表是Jekyll
- 所有 JAMstack 應用程式都是 SSG，但反之則不然。 JAMstack 與 SSG 的差別在于 Javascript ，後者使用前沿的前端工具，如 React，以獲得更好的使用者體驗。典型示例是 Gatsby。
下面是目前流行的 JAMstack 應用程式清單：
- Gatsby - React
- VuePress - Vue
- Gridsome—— Vue
以下是流行的 SSG 清單，它們在技術上不是 JAMstack 應用程式：
- Hugo
- Jekyll
- Hexo
參考資料
https://www.vincentntang.com/wtf-are-jamstack-apps-and-static-site-generators/
https://levelup.gitconnected.com/spa-ssg-ssr-and-jamstack-a-front-end-acronyms-guide-6add9543f24d
https://devpress.csdn.net/opensource/62f919717e6682346618bc72.html
https://devpress.csdn.net/opensource/62f437277e66823466188365.html