JAMstack 应用程序和 SPA 有什么区别

Question

这可能是一个愚蠢的问题，但我现在才刚开始从事 Web 开发，而且我对 JAMStack 尤其陌生。

我一直在阅读，从我得到的内容来看，基本上在 JAMStack 中，我们将所有内容都提供给前端应用程序，因此 Javascript 可以像我们的操作系统一样，并通过 API 世界获取所有内容。

虽然，这在我看来有点像 SPA 的工作方式。我们通过 API 获取我们想要的内容并相应地重新呈现页面的部分内容。

我在这里缺少什么？任何人都可以指出我正确的方向并比较这两者的不同之处以及这些差异的优点/缺点是什么？

谢谢

Answer 1

你是对的，这很令人困惑。

以前，术语 JAMstack 描述了 JavaScript、API 和标记。由于采用了和混乱围绕这一技术发展趋势，jamstack.org略有变化的定义JAMstack来Jamstack。

Jamstack 是一种旨在使 Web 更快、更安全且更易于扩展的架构。它建立在许多开发人员喜爱的工具和工作流程之上，这些工具和工作流程带来了最大的生产力。预渲染和解耦的核心原则使站点和应用程序能够以前所未有的信心和弹性交付。

当您查看旧定义并非常纯粹地考虑它时，SPA 可以属于这一类别。这可能是定义从 JAM（JavaScript、Apis、Markup）转移到 Jam（技术混合）的原因。

不过，大多数人所说的 JAMstack 站点是带有预渲染 HTML 的站点。这就是不同之处。JAMstack 站点（或静态站点）带有一个适当的构建过程，可以预先生成所有需要的 HTML 文件。这种方法托管成本低、速度快（SPA 必须首先发出请求才能显示某些内容）并且更易于访问。

流行的项目是11，或者Nuxt和Next，Gatsby或其他。

甚至查看流行的选项也有细微差别。110 eg 以“纯粹”的方式传递主要是预先生成的 HTML。

Nuxt/Next/Gatsby 和其他工具通常带有通用的 JavaScript 方法。它们生成静态 HTML，但一旦加载了 JavaScript，它们就会转换为 SPA。

尽管如此，细微差别是微妙的，我不会太担心。但请记住，与经典 SPA 相比，JAMstack 世界中的预渲染 HTML 站点提供了一些不错的性能改进。

Answer 2

好问题。Jamstack 名称中的 J 很容易导致这方面的混乱！

对于 Jamstack 站点的前端使用什么，没有任何规定。它可能是包含大量 JavaScript 的单页应用程序，也可能是完全没有 JavaScript 的纯 HTML 和 CSS。

区别在于它的服务方式。

Jamstack 站点作为静态资产托管，而不是来自一组主动计算对每个请求的响应的服务器。这为它们提供了一些良好的性能、规模和安全特性。并解锁一些令人愉快的开发工作流程

因此，尽管 SPA 可能看起来与前端中的某些 Jamstack 站点类似，但它可能托管在服务器上，该服务器主动生成对每个请求的响应，将内容应用于前端使用的模板等。而 Jamstack 站点将提供预先生成的资产，也许可以通过 JavaScript 和 API 调用来丰富它们的客户端。

我制作了一个 FreeCodeCamp 视频，其中详细介绍了您可能感兴趣的大部分内容（然后深入研究示例），并且Jamstack 网站上还有一些相关术语的术语表。