SSG 与 JAMstack 有啥区别不同？
网友回复
静态网站生成器（static site generate）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-shirtshttps://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横空出世？
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应用程序？
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.htmlproducts/awesome-t-shirt.html
当用户访问该站点时，您可以预加载所有这些路由！ 当用户导航到该页面时，页面上的 <footer> 和 <header> 可能是相同的。 但是每次用户导航到页面的不同部分时重新渲染这些内容是没有意义的。 React改变了编写前端应用的方式 React 执行所谓的 tree-shaking 或 diff-rendering。 它找出实际需要更改的内容，仅呈现这些更改， 从而无需每次重新渲染 <footer> 和 <header> 。 当听到为什么 JAMstack 应用程序如此受欢迎时，将不得不说这是Javascript 的力量！ 这也是每篇 JAMstack 文章都提到的好处！ 它使用 React，一个单页应用程序框架，可能完成所有可能的任务。3.2 有哪些 JAMstack 工具？
4.本文总结
下面对SSG、JAMstack应用程序做一个简单的总结： SSG 以最少的更新解决博客等只读站点的痛点。 无需修改 100 个 .html 文件，而是通过修改模板并编写 markdown，然后 SSG 会为您自动生成 .html 文件，典型代表是Jekyll 所有 JAMstack 应用程序都是 SSG，但反之则不然。 JAMstack 与 SSG 的区别在于 Javascript ，后者使用前沿的前端工具，如 React，以获得更好的用户体验。典型示例是 Gatsby。 下面是目前流行的 JAMstack 应用程序列表：Gatsby - React
VuePress - VueGridsome—— Vue
以下是流行的 SSG 列表，它们在技术上不是 JAMstack 应用程序：Hugo
JekyllHexo
by thinkfuture
我知道答案，我要回答
私活外包
最新提问
