Astro，这个前端框架有点不一样！ _Astro

前端技术日新月异，最初的静态网站逐渐被由服务端生成的网站所取代，后来又逐渐向客户端渲染的应用转变。不过客户端渲染也存在一些问题，如加载时间变长和搜索引擎优化难度等。Astro 这个新的前端框架结合了服务端渲染和客户端渲染的优点，可以更好地解决这些问题。
本文就来介绍一下这两年爆火的前端框架 Astro，它在两年的时间新增了 30k+ star:

文章插图
这个前端框架，有点不一样。
Astro 基本概念Astro 是一个开源的 JAVAScript 框架，用于在流行的UI框架（如React、Preact、Vue 或 Svelte）之上生成 Web 应用。Astro 的页面由多个独立的组件组成。为了提高加载速度， Astro 会在服务端对页面进行预渲染，并剥离所有 JavaScript，除非将某个组件标记为交互式，此时 Astro 将发送必要的最小量 JavaScript 以实现交互功能。

文章插图
通过这种策略， Astro 页面加载速度快，因为在首次渲染时不需要执行任何 JavaScript 。在注水的过程中，Astro会将 JavaScript “注入”到组件中，使它们变成动态的。
Astro 历史发展Astro 是由 Fred Schott 和 Nate Moore 创建，最初用于构建快速静态内容站点，如博客和落地页等。它最初的独特优势就是简单易用。可以从各种来源获取内容，包括 API、CMS、MDX 文件或 Markdown 文件，并在 Astro 站点上展示。
Astro 最初的设计并非与 React 或 Vue 等竞争，而是为了支持互操作性。简而言之，就是可以在 Astro 中使用喜欢的工具！它提供了对 React、Vue、Svelte 和 TAIlwind css 等前端工具的一流支持。
然而，Astro 真正的亮点是名为岛屿的前端架构范式转变。Astro的岛屿架构能够提高应用的速度，它将 UI 拆分为更小的、隔离的组件，并在静态页面中部分启动交互式组件，这是一个大胆的创新。
现在，Astro 已经发展成一个现代 Web 框架，可用于构建快速的多页面应用、动态服务器端点和注重内容性能的网站。尽管保留了简单性和核心功能，如服务器端点、内容集合、视图过渡以及出色的开发者体验，但 Astro 正不断演进，成为一个功能强大的现代Web应用程序框架。
Astro 工作原理Astro 的核心是其岛屿架构。那么 Astro 中的岛屿是如何运作的呢？这就不得不说它的岛屿架构和部分水合了。
我们知道，客户端和服务端是向用户提供应用的两个主要参与者：

文章插图
下面来看一个在客户端上重新水合的服务端渲染的应用的例子。
服务端渲染简化的过程如下：

在服务端渲染应用
在客户端上重新水合整个应用

这是描述部分水合作用的简单方法。我们没有对整个应用进行水合处理，而是专注于应用的较小交互部分并独立地对这些部分进行水合处理：

文章插图
Astro 岛屿就是嵌入静态html页面中的交互式UI组件。一个页面上可以存在多个岛。每个岛都是通过独立的部分水合方式进行渲染。也就是说，每个岛都是独立水合的。
那这么做有什么好处呢？
通过利用岛屿， Astro 应用可以具有出色的初始加载时间，而不会受到 JavaScript 的限制。大部分站点保持静态状态，只有在初始页面加载之后需要时才会对交互部分或岛进行水合。
Astro 关键功能上面介绍了Astro 的岛屿架构和部分水合，下面来看看 Astro 的核心功能，以更有效的使用它。
组件Astro 应用的最小单位是组件。组件构成了每个 Astro 应用的基?。?

文章插图
Astro 组件文件都以 .astro 结尾。
与大多数其他前端框架类似，组件内的抽象程度由开发者自己决定。例如，组件可以是 UI 的一小部分可重用的组件，例如页眉或页脚，或者组件可以足够大以构成整个页面或布局。
来看看下面的 Hello World Astro 组件：
// HelloWorld.astro ---const name = "前端充电宝"---<h1>Hello world, {name} </h1>可以看到，Astro 包含两个部分：组件脚本和组件模板