【问题标题】:What are the differences between JAMstack application and SPAJAMstack 应用程序和 SPA 有什么区别
【发布时间】:2020-05-05 23:28:47
【问题描述】:

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

我已经阅读了一些内容,据我所知,基本上在 JAMStack 中,我们将所有内容都提供给 前端应用程序,因此 Javascript 可以像我们的操作系统一样通过 API 世界获取所有内容。

不过,在我看来,这有点像 SPA 的工作方式。我们通过 API 获取我们想要的内容并相应地重新渲染页面的某些部分。

我在这里缺少什么? 谁能指出我正确的方向,并比较这两者的不同之处以及这种差异的优点/缺点是什么?

谢谢

【问题讨论】:

    标签: single-page-application jamstack


    【解决方案1】:

    你是对的,这令人困惑。

    以前,术语 JAMstack 描述了 JavaScript、API 和标记。由于对该技术趋势的采用和混淆,jamstack.org 将定义从JAMstack 稍微更改为Jamstack

    Jamstack 是一种旨在让网络更快、更安全且更易于扩展的架构。它建立在许多开发人员喜爱的工具和工作流程之上,并带来了最大的生产力。预渲染和解耦的核心原则使网站和应用程序的交付比以往任何时候都更有信心和弹性。

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

    不过,大多数人称之为 JAMstack 站点的 是带有预呈现 HTML 的站点。这就是不同之处所在。 JAMstack 站点(或静态站点)带有一个预生成所有需要的 HTML 文件的构建过程。这种方法托管成本低、速度快(SPA 必须首先发出请求以显示某些内容)且更易于访问。

    热门项目是eleventy,或NuxtNextGatsby 或其他。

    即使看看流行的选项,也有细微差别。十一例如通过主要交付预先生成的 HTML 走“纯粹”的方式。

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

    总而言之,细微差别是微妙的,我不会太担心。但请记住,与经典 SPA 相比,JAMstack 世界中的预渲染 HTML 网站提供了一些不错的性能改进。

    【讨论】:

    • 定义有很多模糊和不准确之处。为什么 Next 被归类为 JAM 而 React 不是?我们只是重命名 SSR 吗? “SPA 必须首先发出请求才能显示某些内容” - 显然不是每个 SPA 都这样做,当它发出请求时,不只是 API 部分吗?
    • 似乎是 netlify 等营销人员编造的一个术语
    【解决方案2】:

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

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

    区别在于它的服务方式。

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

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

    我制作了a FreeCodeCamp video,其中详细介绍了可能感兴趣的大部分内容(然后更深入地研究示例),Jamstack 网站上还有一个glossary of some related terms

    【讨论】:

      猜你喜欢
      • 2015-04-27
      • 2015-10-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2011-01-19
      • 2010-09-11
      • 1970-01-01
      相关资源
      最近更新 更多