写点什么

Web 框架 Astro 2.0 发布,在静态和动态渲染之外提供了混合渲染能力

  • 2023-04-14
    北京
  • 本文字数:1044 字

    阅读完需:约 3 分钟

Web框架Astro 2.0发布,在静态和动态渲染之外提供了混合渲染能力

Web 框架 Astro 最近发布了2.0版本,在原先的静态和动态服务器渲染功能之上提供了新的混合渲染功能。混合渲染可用于渲染特定页面,以此来获得更高的渲染性能。


Astro Web 框架旨在普及一种叫作“组件岛”的前端架构,这也是 Astro 推出混合渲染的动机:


在将近一年的时间里,Astro 都只允许用户在静态(SSG)和服务器(SSR)渲染之间二选一。静态网站提供了令人难以置信的性能,但缺少为不同请求按需生成 HTML 的能力。


Astro 2.0 的混合渲染把这两种渲染能力结合在了一起。


将静态和动态内容混合在一起可以带来新的可能性:


1. 提高热度页面的渲染性能;

2. 提高大型站点的构建性能;

3. 向已有的静态站点中加入 API。


在之前的版本中,使用 Astro 的开发人员必须在静态渲染(针对静态的、内容主导的网站)或服务器端渲染之间做出选择。有了混合渲染,开发人员可以在构建时预渲染特定的页面或服务器端点,无需放弃已部署的服务器。


大型网站通常有适合使用预渲染技术生成内容的部分,也有需要在请求时生成内容的部分。例如,电子商务网站会预先渲染主页和各种以营销为重点的内容,而产品、价格或折扣页面则使用服务器端渲染,以呈现最新可用的数据。这种混合方法可能会降低渲染网页所需的计算资源量和相关的成本。


对于使用Jamstack的大型站点,比较有价值的是增量静态生成,这是由应用程序框架 Next.js 推广的一种渲染方式。


Astro 新版本还提供了重新设计的错误叠加,改进了对开发阶段模块热加载的支持,并使用了新发布的Vite 4.0来构建内容。


Astro 是一个旨在为以内容为中心的网站提升用户体验的 Web 框架。为此,Astro 尽可能少向客户端发送 JavaScript,确保页面的交互性是可用的。对于完全静态的页面,根本不发送 JavaScript。Astro 为此提出了“组件岛”架构。Web 页面被划分为静态 HTML 内容,其中穿插着称为 Astro 岛的交互式 UI 组件。组件岛是独立渲染的,可以使用任意的 UI 框架(例如,React、Preact、Svelte、Vue、Solid、Lit)。


Astro 宣称自己是“专为速度而设计的一体化 Web 框架”。其基准测试(基于Chrome用户体验报告[CrUX]The HTTP Archive核心Web重要技术报告)报告显示,Astro 的性能优于其他 Web 框架(Sveltekit、Gatsby、Remix、WordPress、Next、Nuxt)。


Astro 是一个采用了 MIT 许可的开源项目。欢迎开发者参与贡献和反馈


原文链接

https://www.infoq.com/news/2023/04/astro-2-hybrid-rendering/


相关阅读:

Web 前端开发最好用的几个 WebGL 框架

Web、移动端、桌面端自动化测试工具或框架推荐

Web 前端设计开发工具集(JS 框架、CSS 预处理)

传统 Web 框架部署与迁移

2023-04-14 14:105939

评论

发布
暂无评论
发现更多内容

助力香港成为全球寿命最长的城市,我们如何看医管局的数字化转型?

有只小耳朵

数字化转型 人才培养

如何巧妙的去除数组中的空格?

程序媛观澜

c++ 字符串

爬虫入门经典(七) | 一文带你爬取淘宝电场

不温卜火

python 爬虫

LeetCode题解:198. 打家劫舍,动态规划(不缓存偷盗状态),JavaScript,详细注释

Lee Chen

算法 大前端 LeetCode

波卡生态DeFi系统开发方案

薇電13242772558

区块链 defi

Three.js杂记(二)——绘制点、线、面

空城机

JavaScript 大前端 WebGL 3D可视化 three.js

前置机器学习(一):数学符号及希腊字母

caiyongji

机器学习

手把手教学基于深度学习的遥感影像倾斜框算法训练与分析

cv君

人工智能 深度学习 AI 智能 视觉

大前端工程师进阶之路,Node全栈为前端带来更多可能

孙叫兽

大前端 全栈 Node

Three.Js杂记(一)——起步

空城机

大前端 WebGL 3D可视化 three.js

一文看懂特权访问管理(PAM)

龙归科技

云计算 云存储

飞桨刷新分子性质预测榜单,助力AI药物研发

百度大脑

AI 药物研发 百度飞桨

想当程序员,如何判断自己是否适合当前端程序员?

孙叫兽

程序员 大前端 引航计划

2021年ONNX开发者大会即将召开

百度大脑

百度飞桨 ONNX

首席AI架构师进阶之旅开启!第4期60位AICA学员硬核开学

百度大脑

AI 百度飞桨

爬虫入门经典(四) | 如何爬取豆瓣电影Top250

不温卜火

python 爬虫

爬虫入门经典(十二) | 一文带你快速爬取豆瓣电影

不温卜火

python 爬虫

爬虫入门经典(十八) | 滑动验证码识别

不温卜火

python 爬虫

Git教程 - Git 命令与操作

码语者

git DevOps

新思科技BlackDuck帮助Avira软件公司在保持DevOps速度的同时提升开源安全

InfoQ_434670063458

前置机器学习(二):30分钟掌握常用Jupyter Notebook用法

caiyongji

机器学习

数据分析实战项目-蛋壳公寓投诉分析

诡途

Python 数据分析 蛋壳公寓

寻找被遗忘的勇气(二十二)

Changing Lin

3月日更

【实战问题】-- 缓存穿透,缓存击穿和缓存雪崩的区别以及解决方案

秦怀杂货店

Java redis 缓存 架构 分布式

2.4 Go语言从入门到精通:条件和循环

xcbeyond

3月日更 Go 语言

爬虫入门经典(十五) | 邪恶想法之爬取百度妹子图

不温卜火

python 爬虫

Three.js杂记(三)—— 物体运动

空城机

JavaScript 大前端 WebGL 3D可视化 three.js

MyBatis-Plus实现自动填充createTime和updateTime

棉花糖

springboot MyBatisPlus

初来乍到,请多关照

空城机

杂记

它终于来了!

Python研究所

Python

前置机器学习(三):30分钟掌握常用NumPy用法

caiyongji

机器学习

Web框架Astro 2.0发布,在静态和动态渲染之外提供了混合渲染能力_大前端_Bruno Couriol_InfoQ精选文章