[陈同学i前端] 一起学Astro｜内容专注-唯快不破

前言

大家好，我是陈同学，一枚野生前端开发者，感谢各位的点赞、收藏、评论

前端界在近十年以来，技术变迁速度飞快，十几年前主流的web页面开发技术手段还仅仅依靠基础的前端三件套以及后端模版语言，如：jsp、aspx

故随着项目发展，会出现许多的问题：

1. 前后端开发耦合，效率低
2. 代码变得越来越难以维护，出现了众多的不可维护代码片段
3. 充斥着许多的相同代码，代码复用性低
4. ...

为了提高前端开发效率，促进互联网行业发展，业界陆续提出了各种技术

Ajax实现了前端页面不刷新异步请求数据，页面无需进行reload即可更新视图数据，前端可以单独进行开发并通过ajax与后端交换数据

Jquery方便的前端工具库以简化JS编码语法提高开发效率，“优化”了JS代码语法，让开发者能够在实现同一个功能时少写许多代码

Webpack用于进行静态模块打包以赋能开发者结合多种技术与规范进行开发，以适应日趋复杂的业务场景

Vue.js简单易用的前端框架结合响应式实现、模版语法等新特性帮助开发者构建中大型SPA前端项目

...

但无论前端技术如何变迁，最终呈现给到用户的页面仍然是由HTML、Javascript、CSS文件以及各种静态资源所组成

若要提高应用的响应速度以及性能，所有的技术实现基本上都是围绕着JS以及SSR作优化，而Astro也做着同样的事情

本文阅读成本与收益如下：

阅读耗时：5mins

全文字数：6k+

预期效益

• Astro背景
• 知道Astro是什么
• 了解Astro原理
• Astro使用
• 了解Astro使用场景与优势
• 通过Astro脚手架快速初始化应用

Astro背景

为了追求前端应用的性能与速度，近年前端界涌现出许多的解决方案，像SSR、SSG解决方案再到今天的island架构，他们的优化核心思路都是减少客户端Javascript工作负担将大多数渲染工作放在服务器端运行以优化用户首屏体验

MPA & SPA

要学习了解Astro框架，我们需要先来复习一下MPA以及SPA的概念与区别

概念

1. 多页应用 (Multi-Page Application) ：一个由多个 HTML 页面组成的网站，主要在服务器上渲染。 导航到一个新页面时，浏览器会从服务器请求一个新的 HTML 页面

传统 MPA 框架如：Python Django、PHP Laravel、WordPress

1. 单页应用(Single-Page Application) ：一个由单个 JavaScript 应用程序组成的网站，该应用程序在用户浏览器中加载，然后在本地呈现 HTML

SPA 框架如：Next.js、Nuxt、Svelte、Remix、 React、Vue

区别

SEO：SPA下页面内容需要在客户端执行JS才能呈现；MPA则直接能渲染完整的HTML内容（Better）

性能：SPA下需请求客户端的JS Bundle来执行JS用于页面渲染；MPA下服务器将响应完整的HTML

路由：SPA下由客户端JS处理后续的路由跳转逻辑，需要客户端路由方案；MPA则不需要浏览器侧路由，每个页面对应一个URL

状态管理：SPA下所有路由的状态由客户端JS管理，不同业务逻辑中会进行状态的流转，复杂性随着业务发展而增大，需要状态管理方案；MPA则不需要在客户端做复杂的状态管理

Astro-MPA框架

Astro 是一个 MPA 框架

借助 MPA 的特点，Astro应用服务器返回响应为完整可渲染的HTML内容，用户端收到HTML后可以快速呈现页面，以达到优化首屏、SEO的效果

即使大多数网页的组成部分是静态的，内容页面中仍然可能需要一些交互的逻辑，Astro的出现就是为了解决这一问题

Astro是什么

Astro是一款基于island概念实现，为创建快且以内容为主的网站应用而生的MPA上层框架

五大核心设计原则

1. 以内容为中心：Astro 专为内容丰富的网站而设计（MPA）
2. 服务器优先：网站在服务器上渲染 HTML 时运行速度更快（SSR）
3. 默认快速：在 Astro 中构建缓慢的网站是不可能的（默认采用以速度优先的配置）
4. 易于使用：不需要成为专家即可使用 Astro 构建某些内容（Astro模版语法为HTML的超集，上手门槛低）
5. 功能齐全且灵活：超100多种 Astro 集成可供选择（简单易用且丰富的集成）

作者

Fred K. Schott（Astro、snowpack核心开发者）

曾经风靡前端界的snowpack构建工具因各种原因停止了长期维护，Astro框架的底层构建工具接入也转向了Vite

Astro原理

基于Astro框架搭建的网站应用响应速度快的核心在于Astro-Island（组件群岛: Astro开创的一种新Web架构模式）

Astro-Island：静态 HTML 中的可交互 UI 组件

一个页面包含多个island组件，并且每个island组件都被独立呈现

同时在Astro框架下，我们可以方便地通过集成将不同前端框架（Vue、React、Svelte）的组件导入成为island组件

最终在页面渲染到浏览器的时候，即可通过局部注水（hydration）激活island组件使其具有与用户交互的能力

普通的ssr是页面级注水，Astro将注水细粒度控制到组件层面，尽可能地避免额外开销

Hydration相关

hydration：一种向服务器呈现的 HTML 添加交互性的技术，客户端 JavaScript 通过将事件处理程序附加到 HTML 元素，将静态 HTML 网页转换为 动态 网页

在Astro中我们需要通过hydration（注水）完成island的激活，这里听起来很高大上，但实际上的操作并不难理解

如图所示，一个Client页面由多个组件组成，其中绿色部分为静态组件（无需交互），而紫色部分为island组件需要Javascript的激活逻辑进行注水

Astro在给客户端响应页面HTML时就会预先注入一段辅助Javascript片段，用途为根据开发者在island组件标签上指定的时机加载对应的Javascript模块文件(如图)

---

astro-island标签上有许多的属性:

component-url：待注水的目标组件资源 renderer-url：目标组件文件对应的渲染器模块文件 before-hydration-url：注水前预加载资源URL client：开发者指定的注水时机，如：‘load’代表组件需要尽快进行注水实现交互能力

最终辅助Javascript片段便会根据页面中每一个astro-island标签的信息，分别进行资源的加载与island组件的注水

CSS处理

Astro中的样式在服务器响应给客户端的HTML中以script标签(type="module")的形式存在，即CSS模块文件

故拿到HTML后浏览器会对src中的路径进行请求，拉取以JS模块形式存在的CSS模块

然后执行JS模块的逻辑以调用updateStyle方法,将CSS样式字符串更新到页面当中去

以组件为隔离单元进行样式隔离，组件内编写的样式默认情况下只会应用于组件内部

Astro使用

Astro模版语法

所有学习了HTML的同学，通过简单了解Astro模版语法就能够进行页面的编写，本来Astro的模版语法就是HTML的超集

Astro模块文件使用代码栅栏（---）来识别 Astro 组件中的组件脚本，在组件脚本中我们能够实现：访问传入的组件参数、导入外部模块、获取外部数据等功能

Astro 的组件模板语法也支持 JavaScript 表达式、导入的组件和特殊的 Astro 指令，在组件脚本中定义的数据和值（在页面构建时）可以在组件模板中使用，以产生动态创建的 HTML

代码栅栏（---）里的脚本逻辑不会出现在用户浏览器侧

使用（其它）框架组件

在这里我们使用Vue框架进行演示

第一步先根据框架文档提示安装必需的第三方依赖并在Astro配置文件中新增集成配置

之后在新增src/components/vue/Card.vue组件文件

在demo.astro中的代码栅栏内将框架组件导入成VueCard，并在模版区域传参使用

最终呈现效果如图：

island组件

接下来我们将以上Vue组件改造一下，加入dialog的功能点，并在使用时指定为island组件

在组件标签上加入client:load属性表示该组件需要尽快进行加载注水

常见客户端指令：

1. client:load

在页面加载时，立即加载并激活组件的 JavaScript

• client:idle

一旦页面完成了初始加载，并触发 requestIdleCallback 事件，就会加载并激活组件中的 JavaScript

• client:visible

一旦组件进入用户的视口，就加载组件的 JavaScript 并使其激活

• client:media

client:media={string} 一旦满足一定的 CSS 媒体查询条件，就会加载并激活组件的 JavaScript

• client:only

跳过 HTML 服务端渲染(SSR)，只在客户端进行渲染(CSR)

Astro优势能力与场景

优势能力

1. 网站大部分区域被转换为快速、静态的 HTML，JavaScript 只为单独组件而被加载，在支持页面组件可交互特性的前提下拥有优秀的首屏加载体验
2. Astro能识别页面上的哪些组件需要在客户端浏览器中运行，避免全局JS注水导致的性能损失（client指令）
3. Astro能准确地补充页面上需要交互性的内容，并将您网站的其余部分保留为静态 HTML，通过辅助Javascript片段以及astro-island标签的属性进行注水，能够做到支持多个前端框架的组件使用（Partial hydration-与框架无关）
4. Astro能准确控制如何以及何时渲染每个组件，根据业务需要在保证功能完整不影响用户体验的前提下进行加载时机优化（client指令）

场景

适用于重内容轻交互的网站应用搭建，如：博客站点、营销站点、官方站点、文档站点、作品站点

适用于大多数对首屏渲染速度、TTI要求高，但整体页面交互不复杂的前端项目

适用于传统的内容站点，接入成本低并结合现代框架实现项目升级

但对于重数据、交互逻辑的应用，Astro不是第一选择

讲到最后

阅读完本篇文章，相信读者能够对Astro有一个基本的了解与认知

通过Astro的Github仓库可知项目社区较为活跃，项目还处于发展时期

astro-island是对island概念的一种实现，因它与普通的SSR页面级注水不同，Astro能够控制注水的细粒度（组件级别）一定程度地降低hydration对应用性能的影响，故受到不少开发者青睐

在应用任何一项新技术前都需要根据具体的场景评估解决方案是否为最优解并满足相关的需求，切忌为跟风而盲目使用技术～～～

谢谢大家，我们下节再见！！！

感谢各位看到这里，如果你觉得本节内容还不错的话，欢迎各位的点赞、收藏、评论，大家的支持是我做内容的最大动力

本文为作者原创，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接，否则保留追究法律责任的权利

参考补充

Astro官方文档

Astro Github仓库

Vite官方文档

Vue3文档

Islands Architecture