自从我在评论中发表了我的2019年论文,详细描述了静态托管的行业趋势以及像Vercel这样的Jamstack CDN的崛起,一个问题一直在提出:这与服务器和传统的CDN有什么不同?那么为什么不直接使用带有容器的服务器(即使是无服务器的)呢?
归根结底,答案在于我们不仅能够托管和缓存静态资产,而且能够提升它们。
在JavaScript中,经常使用单词Hoisting来描述编译器如何提取并将";声明移动到作用域的";顶部";,从而使以下代码实际工作:
函数a(){return b()//工作正常,没有错误!函数b(){return";hello world";}}。
这个术语在编译器优化行话中也用来描述一类优化,在这种优化中,代码被分析,看起来像静态或不变的部分被移出(提升)循环。
函数a(b,c){设SUM=[](设i=0;i<;100000;i++){SUM[i]=i+(b+c)//提升↗}}a(314159)。
注意,和b+c与循环的上下文无关:它是循环不变量。优化编译器可以识别它,并自动提升它,这样计算的行为就像您自己在循环之外编写的一样。
在程序中执行计算是很棒的,而且您每天使用的编译器和VM很可能有很多类似的优化。
然而,作为一种软件架构,Jamstack现在实现的是将计算结果提升到边缘,紧挨着访问者所在的位置。
Jamstack的一个核心原则是尽可能地预先渲染(预先计算),这突出了静态站点的生成。其关键思想是,在请求的时间线中稍后发生的计算现在已经转移到构建阶段,只执行一次,并且可供所有用户共享。
用户请求边缘服务器静态提升计算提前完成并始终由所有边缘共享计算实时完成并在缓存命中代理到服务器时共享部分²传统CDN(即时)Jamstack(AOT)性能可用性成本✓最佳性能✓更快的缓存未命中✓始终在线✓自动全局故障切换✓最便宜的✓零维护开销⨯取决于设备操作/SRE⨯昂贵的HA(多AZ)³⨯服务器持续运行³⁴⨯设备操作/监控/SRE⨯速度较慢。同样适用于服务器-渲染和操作您自己的静态文件服务器²对于流量较小的页面或站点来说,缓存命中将更加罕见,并且将高度依赖于地区,冷启动可以通过Lambda资源调配来实现,这会显著提高成本⁴功能和无服务器容器提供自然的多区域,但由于成本较高[3]。
从Next.js9开始,下一个构建过程将自动开始以每页(入口点)为基础输出最佳资产。此外,在Next.js9.3中,改进了静态站点生成的挂钩,并引入了增量静态生成来附加(并很快更新)页面。
js使将站点或应用程序的静态部分提升到边缘变得轻而易举。让我们以复杂站点(vercel.com)的构建输出为例:
Next.js构建过程的输出因开发人员使用的数据获取策略而异。
正如您从表示输出类型的符号(0λ)中看到的那样:
我们静态地构建主页。我们公司的主页,我们的求职信,以index.html的形式构建,并被推到了边缘,以达到最快的速度和最可靠的效果。
/api函数作为无服务器(Lambda)函数导出。这些文件是通过在./page/api(更多)中放置文件来创建的。
在构建时,我们通过使用静态站点生成挂钩查询API来创建博客帖子。博客帖子,就像我们的主页一样,被静态地提升(优化)到EDGE网络。
尽管我们的仪表板本质上是超级动态的,但它是一个静态HTML页面,它使用客户端的Reaction Hooks安全地查询数据。
CDN很棒,而且已经存在很长时间了,静态主机也是如此。然而,在很长一段时间里,CDNS一直将原产地视为一个不透明的黑匣子。
取而代之的是,现在可以将内容直接推送到网络上,并设计针对这一功能进行优化的框架。因此,通过静态资产提升等优化,网站现在变得比以往任何时候都更快、更可靠。
要开始开发Jamstack站点或应用程序,请查看Next.js,您只需单击几下即可将其部署到Vercel edge网络。