首页 > web前端 > css教程 > 静态与动态与jamstack:在哪里?

静态与动态与jamstack:在哪里?

尊渡假赌尊渡假赌尊渡假赌
发布: 2025-03-21 10:16:10
原创
794 人浏览过

静态与动态与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中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板