静态与动态与jamstack：在哪里？

开发人员经常讨论“静态”与“动态”网站，而jamstack一词也通常使用。这些术语是什么意思，“静态”站点与jamstack或动态站点之间的分界线在哪里？这些看似简单的问题有细微的答案。让我们深入研究这些概念，以更好地了解Jamstack。

定义边界

考虑椅子和凳子之间的区别。大多数人会说椅子有四个腿和背部，而凳子有三腿，没有背部。

但是，模糊线条的设计呢？

凳子越像椅子一样，区别就越清晰。最终，大多数人都同意这是凳子，而不是椅子。看似微不足道的练习突出了定义边界的重要性。它有助于我们了解极限和灰色区域。最终，即使是坚定的椅子倡导者也会承认物体显然是凳子的地步。

尽管椅子很有趣，但本文侧重于网站交付技术。让我们将相同的练习应用于静态，动态和jamstack网站。

高级概述

访问网站时，会发生一些幕后流程：

1. 您的浏览器执行DNS查找以将域名转换为IP地址。
2. 它从该IP地址请求HTML文件。
3. Web服务器返回请求的文件。
4. 在页面渲染过程中，浏览器可能会遇到对资产（CSS，JavaScript，图像）的引用。然后，它要求这些资产。
5. 此周期重复，直到浏览器具有所有必要的文件为止。一个网页通常会提出50个请求。

至关重要的是，即使在动态网站上，网络服务器对每个请求的响应始终都是静态文件。这些文件可以像其他任何文件一样保存或共享。

静态网站和动态网站之间的区别在于Web服务器的作用。在静态站点中，请求的文件已经存在；服务器只需返回它们。在动态站点中，软件生成响应。这可能涉及数据库查询，模板处理或添加时间戳。这一代人都会发生在每个请求中。

这是静态和动态网站之间的基本区别。

Jamstack的位置

静态网站有局限性。虽然非常适合信息站点，但它们本质上缺乏动态的内容或行为。 Jamstack桥接了静态和动态之间的缝隙。它利用静态站点的优势，同时在需要时启用动态功能。

Jamstack中的“堆栈”是一个错误的名称。这不是堆栈，而是类似于AWS良好框架框架的5支支柱的哲学。这种歧义引发了关于其含义的许多讨论。

了解jamstack

Jamstack是静态站点的超集。要理解它，让我们检查一下其起源。

2002年，亚伦·斯瓦茨（Aaron Swartz）的博客文章“烘烤，不要炒”强调了静态网站的好处，这具有挑战性的限制。他强调了更简单的维护，更轻松的备份和平台独立性的优势。

在整个历史上，类似的挫败感推动了与Jamstack相关技术的发展：

• MovableType解决了现有博客CMSS的性能和稳定性问题。
• Jekyll旨在简化博客，避免WordPress和Mephisto的复杂性。
• 雨果优先于其设计中的内容写作。

早期jamstack工具中的重复主题包括降低复杂性，提高性能，减少供应商锁定以及更好的开发人员工作流程。

在过去的二十年中，JavaScript的演变和微服务的兴起创造了一种新方法：将静态前端与动态后端解耦。

2015年，Mathias Biilmann创造了“ Jamstack”来描述这种现代方法，克服了“静态网站”一词的局限性。这使较旧的静态技术振兴了，并将它们推向了新的限制。 Jamstack的方法的好处导致了其快速增长。

在Jamstack前十三年，Aaron Swartz主张将输入（需要动态处理）与输出（可以预渲染）分开。 jamstack的本质是前端和后端的这种脱钩，并在可能的情况下进行预渲染和动态功能。

jamstack比动态站点的优势源于其六个支柱：

安全

较少的运动部件减少了攻击表面。

可伸缩性

静态内容可以通过CDN轻松扩展。

表现

CDN交付可显着提高页面负载速度。

可维护性

静态网站本质上更容易维护。

可移植性

静态位点在服务器之间很容易传输。

开发人员的经验

与GIT工作流程无缝集成。

克里斯（Chris）对jamstack和wordpress的比较，以及他在“静态是否？”中的分析，进一步探讨了这些观点。

让我们用这些支柱评估jamstack用例。

静态和jamstack的边缘

建立基础知识后，让我们检查每个定义的界限。我们将将边缘案例分为四组：

• 严格静态：完全遵守静态的定义。
• 主要是静态的：虽然不是完全静态，但大多数人会认为它是静态的。
• Jamstack：与动态后端脱钩的静态前端。
• 动态：按需渲染页面。

许多案例可以分为多个类别。我们将使用最严格的分类。

JavaScript互动

带有JavaScript驱动图像幻灯片的静态位点仍然是静态的。所有相互作用都发生在浏览器中。

曲奇饼

一个基于cookie的横幅的静态站点仍然是静态的。

外部资产

从动态外部来源加载图像或JavaScript通常被认为是静态的，尽管严格来说，但事实并非如此。

iframe

尽管嵌入式内容具有动态性质，但通过IFRAME（例如，Google Maps）嵌入内容通常被认为是静态的。

表格

当数据提交需要后端时，静态站点上的表格就会变得动态。区别取决于表单提交服务是否被视为网站的核心部分。

AJAX请求

Ajax请求，尤其是对动态的后端请求，将站点推向静态区域。

嵌入式电子商务

在静态站点上启用电子商务的服务通常使用AJAX请求，将其放置在Jamstack类别中。

单页应用程序（SPA）

在很大程度上依赖Ajax的水疗中心本质上是动态的和jamstack。

AJAX调用无服务器功能

后端（无服务器，kubernetes，php）的类型不如前端和后端的脱钩。这是jamstack。

反向代理

只要文件保持不变，反向代理就不会固有地使静态站点动态。

CDN

CDN充当反向代理，不会改变该站点的静态性质。

cdn带有长缓存到期

由于初始按需生成和潜在的缓存无效，动态位点前面的CDN即使具有长缓存，也保持动态。

带静态输出的WordPress

使用WP2Static之类的工具从WordPress生成静态输出会创建一个静态网站。

边缘计算

边缘功能可以添加标头（静态）或操纵HTML（动态），从而模糊线条。广泛的HTML操纵将其推入动态领域。

分布式持续渲染（DPR）

DPR在改进Jamstack工作流程的同时，由于按需页面生成，基本上是动态的。

增量静态再生（ISR）

与DPR类似，ISR的按需页面生成将其归类为动态。

平面文件CMS

平面文件CMS在消除数据库的同时仍会动态呈现响应。

结论

检查这些边缘案例阐明了静态和jamstack的边界。目标不是教条的依从性，而是了解权衡。网站可能主要是带有动态元素的jamstack；这是完全可以接受的。较近静态，性能，安全性和可扩展性越好。讨论正在进行，理解权衡是关键。

以上是静态与动态与jamstack：在哪里？的详细内容。更多信息请关注PHP中文网其他相关文章！