Jamstack Architecture具有提供现代,快速和安全的网络开发体验的能力。
为了取得更好的性能,开发人员必须研究不同的方式和工具,这些方式和工具可以共同提高速度,同时保持高度的安全性。传统和动态的基于CMS的网站的缺点是必须从数据库中检索数据或类似的数据才能在网站上提供内容。使用所谓的反向代理和缓存(即“快速存储”),例如Varnish和nginx,是提高性能的少数选择之一。也就是说,直到jamstack架构(和框架)到达。
(您还将在codehooks.io blog.上找到本文)
什么是jamstack?
在其核心上,Jamstack是一种Web开发方法,专注于使用客户端JavaScript,可重复使用的API和预构建标记来创建Web应用程序。该体系结构可通过使用预构建和预渲染的页面来更快,更安全的Web开发,然后通过内容交付网络(CDN)将其交付给用户。
JAMstack.org网站将该术语定义为:
“ jamstack是一种架构方法,它使网络体验层与数据和业务逻辑相关,提高了灵活性,可伸缩性,性能和可维护性。Jamstack消除了对业务逻辑的需求来指示网络体验。通过API消费自定义逻辑和第三方服务的网络。”
Jamstack作为建筑概念,是由Netlify的联合创始人Mathias Biilmann Christensen创建的,Netlify是一家快速增长的云计算公司,为静态网站提供托管和无服务器的后端服务。它可用于构建比动态网站明显更快,更稳定的静态网站,但在发布新内容或源代码更改时更新网页的意义上仍然是动态的。因此,jamstack不是一个特定的工具,而是一个使创建闪电网站有效的体系结构和生态系统。
jamstack是什么意思?
果酱代表“ javascript”,“ apis”和“ markup”:
- JavaScript 首先加载了网站后,处理网站的所有部分都应该是动态的。现代前端框架,例如Vuejs,React或Angular非常适合使用。
- apis 是因为jamstack应用程序/网站没有服务器。这意味着在此体系结构中不必需要自开发的“后端”代码。开发人员可以专注于实施前端逻辑。如果您需要存储用户输入,处理图像,对用户进行身份验证,执行内容搜索,转换图像,处理付款等,则可以通过标准化或自定义API来处理外部服务。
- 标记是构建步骤中生成的HTML代码。该代码是纯粹的静态HTML,但是它可以是动态的,因为HTML是从与HTML模板相结合的数据中构建的。在许多框架中,JavaScript(React,Vue)也可以用于创建此静态部分。所谓的无头CMS API通常用于动态内容。在这样的设置中,当将源代码选中到版本控件(例如GitHub)或通过CMS API接收新的或更新的内容时,将启动标记的构造。 。
在下面的jamstack体系结构的说明中,我们看到模板和内容的组合被编译到静态HTML页面/内容中,然后将其分配到内容网络(CDN)。 CDN有助于确保页面加载快速并尽可能靠近用户。
为什么要开始使用Jamstack?
jamstack是开发网站的现代有效方法。与集中式数据库相关的网站相比,基于jamstack的网站具有以下优点:
- 速度 - 页面加载快速
- 较低的成本 - 与专用服务器/数据库相比,静态网站便宜得多
- 可伸缩性 - 内容是静态的,不会从中央服务器加载
- 维护 - 无需监视任何服务器
- 安全性 - 静态网站上没有秘密 - 仅需要确保对API的访问
SEO- Google偏爱果酱
从SEO的角度来看,除了jamstack for content-rich网站外,几乎没有其他理由。 Google偏爱快速加载的网站,用户不会在同一程度上单击“后退按钮”。从开发人员的角度来看,Jamstack将提供更好的体验,因为他们可以专注于开发最佳的用户体验,使用最新技术并不必担心性能和可伸缩性。
开发人员喜欢它
jamstack对前端开发人员的关键好处之一是能够专注于构建用户界面而无需服务器端渲染或复杂的后端逻辑。这允许更加敏捷,更有效的开发过程,并能够利用广泛的第三方API和服务来建立动态和引人入胜的用户体验。他们可以使用自己喜欢的UI框架(例如React,Vue,Svelte)。如果需要自定义后端API(无头CMS除外),则有很多工具使此相对简单,例如Heroku,Firebase,Xata10,restdb.io和restdb.io和codehooks.ioð
流行框架
您会在JAMstack website上找到jamstack网站最受欢迎的发电机。这些是顶级竞争者:
- Next.js-在React社区中非常受欢迎 - 支持静态站点生成和服务器端渲染(SSR)动态应用程序。
- Hugo-疯狂快速构建和许多功能 - 优化了速度,易用性和可配置性。建立在Go编程语言上。
- Gatsby-基于内容/数据插件的巨大生态系统进行反应 - 使用GraphQl提供内容/数据。
- Nuxt- nextjs的vue替代方案 - 支持静态站点生成和SSR。
- Docusaurus-使用React和Markdown创建功能强大的静态站点以供文档或其他任何内容(本博客使用Docusaurus)。
摘要和结论
简而言之,Jamstack是一种强大而有效的Web开发体系结构,非常适合希望构建现代,快速和安全的Web应用程序的前端开发人员。 jamstack专注于客户端JavaScript,可重复使用的API和预构建的标记,提供了一系列好处,使其成为希望创造引人入胜且动态的用户体验的前端开发人员的吸引人选择。