Jamstack ,你真的了解它吗?

简介: 来聊聊 Jamstack。
作者 | 繁易

image.png

如果你之前从未了解过 Jamstack,我推荐先阅读文章:Jamstack,下一代Web建站技术栈?(https://zhuanlan.zhihu.com/p/281085404)。

Jamstack 是什么?

Jamstack 是一套用于构建现代 Web 站点的技术栈,拥有高性能、安全性、易扩展的特性。

Jamstack 技术栈 & 生态

image.png

Jamstack 聚合了现代前端开发所需要的脚手架,框架,工作流等,从而最大化的提高工程师的生产力。

工作流

image.png

在这里,Jamstack 的核心理念是预渲染、使用 JavaScript 实现动态功能、使用 HTTP Api 连接第三方服务。

举个例子

当你要开发一个博客,在这之前你可能会使用 Wordpress 去搭建你的博客站点,但与此同时,你也需要负责维护 Wordpress 的服务与数据库等。

而如果你使用 Jamstack,你可以使用诸如 strapi 的 headless cms 服务(意为只提供 API 而不提供页面渲染),用来存放你的文章数据,你在前端可以使用类似 Next.js 的框架去构造站点,通过请求 headless cms 的 Api 来渲染页面。

而在发布时,你将在构建时生成静态页面,并发布至 CDN。因为是静态页面,所以性能好,而托管至 CDN 意味着该页面是只读的,安全性高,且 CDN 是全球部署的话,那么页面也能实现全球部署,拓展性非常好。

误区

Jamstack 在国内落地时,总是会有同学认为这是新瓶装旧酒,或者是前端炒出来的新概念,但实际上忽略了 Jamstack 自身架构的特性与优势。

Jamstack 是不是新瓶装旧酒

Q:Jamstack 和之前的手动发布页面到 CDN 有什么区别,是不是新瓶装旧酒?

A:这里我可以很明确的给一个答案:不是。

首先在我看来,Jamstack 虽然表现的都是页面和资源托管至 CDN,是实际上背后的工作流与过往是截然不同的。相较于以往手动开发和发布的模式,Jamstack 是聚合了现代前端框架、工作流、发布平台的,这一点非常的重要。

image.png

对于工程师而言,效率就是生产力,之前的页面不一定是基于现代工程的,每次生成静态页面也依赖于自己写的脚本,每次页面更新还需要手动发布,效率偏低。而使用 Jamstack,你可以利用你最熟悉的框架,通过框架去批量生成静态页面,并且聚合 Git 等服务,实现推送即发布的全自动工作流。效率会高很多。

举个相似的例子:使用 React/Vue/Angular 和使用 jQuery 写页面,最终都是操作 DOM,所以 React/Vue/Angular 和 jQuery 是一样的,新瓶装旧酒?

先进的工具带来先进的生产力,即使最终的表现是前端页面和十年前一样,部署至 CDN。但实际上生产效率与质量还有可生产的页面已经发生了很大的进步。

不论是什么前端页面,能打开的更快终究是更好的,因此如果只关注到部署的结果,而没有注意到生产流程与生产效率的变革,便会落入“Jamstack 是新瓶装旧酒”这个论点的坑中。顺带一提,近几年的前端工具基本上也是朝着“性能更好”、“更易用”等方向去前进的。

Jamstack 能适应所有的场景

Q:那是不是什么网站都上 Jamstack 就对了?

A:明确的回复,不对,Jamstack 的优势非常明显,所以劣势也很明显。

如果只关注到 Jamstack 的性能优势,希望将 Jamstack 用于所有场景,其实是不正确的。Jamstack 的站点为了获得性能、安全、可拓展性的优势,需要将页面托管至类似 CDN 的服务中,这个过程中,一个页面需要经过以下两步才会真正的发布到线上。

  • 预渲染

    • 需要提前渲染出最终的页面
  • 发布

    • 托管服务刷新缓存后展示新页面

针对预渲染,由于往往需要在构建时或者运行时实现功能,那么会存在一定的限制。构建时生成无法实现千人千面,运行时生成则需要考虑生成的数量与成本的考虑。假定将每一条微博都生成一个静态页面,诚然性能是好了,但所带来的成本也是不可估量了,且许多微博往往访问的人极少,那么运行时生成的性能可能还不如之前,

在 Jamstack 架构下,CDN 是最常见的托管服务,但 CDN 为了保证性能也存在着缓存的机制,这意味着页面的实时性无法保障。现有的 Jamstack 框架也会添加定时生成的功能,比如每 10S 就刷新一个页面并推送至 CDN,但不论怎么做,在实时性上还是不如实时服务的。

Jamstack 最适合一些内容更新不太频繁的网站(比如新闻、电商、文档)。它不适合 Feeds 流、聊天室、论坛、个性化推荐这样高度动态化的网站,以及邮箱、编辑器这样偏重型的 Web 应用。

Jamstack 会是企业级框架的核心特性而非唯一,混合渲染是未来方向

这个观点是我个人的想法。

在我看来,之所以 Jamstack 在国内难以落地,除去老生常谈的工作流、部署平台、底层依赖的限制外,其实还存在着适用范围单一的问题。

这里我抛出我的观点:在国内的市场下,Jamstack 将会成为企业级框架的核心特性,但并非唯一的特性,混合渲染才是未来的方向。

诚然,Jamstack 的优势非常明显,用过的同学都说省事都说好,但我在前文也提到了 Jamstack 的劣势,这决定了在企业内部错综复杂的场景中,Jamstack 不是那么万能的。

此外,Jamstack 作为一种现代 Web 站点的开发理念,其是易于被框架实现的。这也意味着,在企业级的场景中,往往会是框架去实现 Jamstack 特性,这个过程是新增而不是替换。因此 Jamstack 会是企业级框架的核心特性而非唯一特性。

至于后一句提到的混合渲染,Idea 实际上是源于 Next.js 10。在 Next.js 中,框架配合 Vercel 云服务平台,实现了纯静态页面托管、增量生成、服务端渲染等多种渲染策略的聚合。从这个角度来看,Next.js 相较其他的 Jamstack 框架是更有优势的。

静态生成

image.png

增量生成策略

image.png

先进的框架 + 先进的工作流 + 更多渲染场景的适配,我认为这才会是企业级框架进步的方向。

总结

Jamstack 是一套优秀的现代 Web 站点开发技术栈,在现代前端工程的加持下解决了开发效率与性能的难题。但由于其劣势也非常明显,所以在企业级框架中,Jamstack 会是一种核心的特性,但不是唯一的特性,企业级是需要支持类似混合渲染的开发模式的。

BTW,本文没有提及到使用 JavaScript 与连接第三方服务这两个特性,理由是:构建现代站点,完全脱离 JavaScript 不现实,故略过;预渲染页面时,往往就包含使用第三方服务(当然我觉得这一点的商业价值实际更大),故也略过。

推荐阅读
Jamstack,下一代Web建站技术栈?

https://jamstack.org/

Next.js - Data Fetching


image.png

相关实践学习
Serverless极速搭建Hexo博客
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
相关文章
|
6月前
|
运维 前端开发 JavaScript
现代化前端开发工具与框架的演进
随着Web应用的复杂性不断增加,前端开发工具和框架在不断演进,以应对日益复杂的需求。本文将从前端开发工具、主流框架以及未来发展趋势等方面进行探讨,帮助读者了解现代化前端开发技术的最新动态。
|
13天前
|
前端开发 JavaScript API
探索JAMstack架构:现代Web开发的新范式
【10月更文挑战第28天】JAMstack架构是一种现代Web开发方法,以其高性能、高安全性和易于维护的特点受到开发者青睐。本文深入探讨了JAMstack的核心概念、优势、工具链及其如何改变Web开发方式,包括静态网站生成、API驱动和预渲染等关键技术。
|
21天前
|
前端开发 JavaScript 安全
探索 JAMstack 架构:现代Web开发的新范式
【10月更文挑战第20天】JAMstack(JavaScript、APIs、Markup)架构是一种现代Web开发方法,通过预构建静态页面、动态功能通过APIs实现和依赖JavaScript,提供高性能、安全和可扩展的Web开发新范式。本文深入探讨其核心理念、优势、工具和最佳实践,帮助开发者理解和应用JAMstack。
|
1天前
|
安全 JavaScript 前端开发
Web开发新趋势:从PWA到Jamstack
Web开发新趋势:从PWA到Jamstack
8 0
|
3月前
|
存储 缓存 JavaScript
提升Blazor应用性能的探索之旅:深入解析关键技巧与最佳实践
【8月更文挑战第31天】在开发现代Web应用时,性能与用户体验至关重要。Blazor作为一款使用.NET构建交互式Web UI的框架,提供了诸多便利。为了充分发挥其潜力并优化体验,掌握一些性能提升技巧十分必要。本文将分享几个实用的Blazor性能优化方法,包括减少不必要的服务器端调用、使用懒加载以及优化DOM操作。通过这些技巧,可以显著提升应用性能,为用户提供更流畅的体验。以下是具体方法及示例代码。
55 0
|
3月前
|
缓存 搜索推荐 数据库连接
FastAPI 的插件化也太牛了吧!轻松打造可扩展 Web 应用,让你的开发如虎添翼,快来感受这神奇魅力!
【8月更文挑战第31天】在互联网迅速发展的今天,Web应用需求日益多样化。FastAPI作为一种高效灵活的Python Web框架,通过插件化设计帮助开发者轻松构建可扩展应用。插件化让开发者能够根据需求选择合适模块,如用户认证、支付处理等,而无需大幅改动核心代码。这种方式不仅提高了开发效率,还增强了应用的稳定性和适应性,使FastAPI成为未来Web开发的理想平台。
86 0
|
6月前
|
开发框架 前端开发 JavaScript
混合应用开发是一种流行的跨平台解决方案
【5月更文挑战第30天】混合应用开发是一种流行的跨平台解决方案
62 1
|
6月前
|
前端开发 JavaScript 开发工具
新一代前端开发工具:探索WebAssembly在前端领域的应用
本文将介绍WebAssembly在前端开发领域的应用,探讨其在提升前端性能、扩展开发语言选择、优化代码大小等方面的优势。通过深入分析WebAssembly的特性和优势,以及实际案例展示,帮助读者更好地理解和应用这一新一代前端开发工具。
|
6月前
|
缓存 Dart 前端开发
现代前端开发中的跨平台框架选择与优化
【2月更文挑战第5天】 在当今技术日新月异的环境下,前端开发领域的跨平台框架选择成为开发者关注的焦点。本文将探讨不同跨平台框架的特点和优缺点,并提供优化建议,帮助开发者更好地选择和应用跨平台框架,提升前端开发效率和用户体验。
|
6月前
|
Rust 前端开发 JavaScript
探索未来:WebAssembly与现代Web开发的融合
在当今快速发展的技术世界中,WebAssembly(简称Wasm)已经成为了一个颠覆性的技术,它不仅打破了传统前端开发的限制,还为高性能应用的实现提供了新的可能性。本文将深入探讨WebAssembly的核心概念、它如何与现有的Web技术栈相结合,以及通过实际案例分析其在现代Web开发中的应用。我们将从WebAssembly的基础出发,探讨其与JavaScript的互操作性,最后通过一个具体的应用示例,展示如何利用WebAssembly提升Web应用的性能和用户体验。本文旨在为前端开发人员提供一份指南,帮助他们理解并开始使用WebAssembly来构建下一代Web应用。