【第3392期】前端框架Astro在房产业务实践

前言

介绍了热门前端框架 Astro 在房产业务中的实践应用，包括 Astro 的特性、性能优势、项目实践案例以及如何解决在实践中遇到的问题。今日前端早读课文章由 @张志鹏分享，公号：58 技术授权。

正文从这开始～～

Astro 介绍

为什么使用 Astro

随着业务不断地发展，对项目的要求也越来越高。加载要更快，性能要更好，资源消耗要更少，同时也要减少开发成本，并且还要满足业务的各种诉求。经过我们的调研最终我们锁定了 Astro 框架，Astro 具有轻量级与高性能、卓越的 SEO 优化、兼容性与灵活性、简洁的开发体验、出色的社区支持、成本效益高等优势。能一站式解决了我们大部分诉求。

什么是 Astro

Astro 是一个现代化的静态站点生成器和前端框架。Astro 由原 Snowpack 团队于 21 年 4 月创建，并于 22 年 8 月发布了 1.0 正式版本，当前已经发布到了 4.x 版本。从创建至今的 3 年时间里，Astro 的 Star 数已经达到 46k。对比创建 3 年时的 Vue Star 数是 26k、React Star 数是 37k。从下图可以看出来 Astro Star 增长曲线还是很陡峭的，一直处于火热状态。

Asro Star 数变化趋势

Astro 的特点

1、群岛架构：一种基于组件针对内容驱动网站进行优化的 Web 架构。

Astro 开创并推广了一种叫做 “群岛” 的前端架构。群岛架构通过帮助你避免单体 JavaScript 模式并自动从页面中剥离所有非必需的 JavaScript，从而实现了更好的前端性能。开发者在使用 Astro 的同时，仍然可以继续使用他们最喜欢的 UI 组件和框架，并且从中得到受益。

“Etsy” 的前端架构师 Katie Sylor-Miller 在 2019 年首次创造了 “组件岛屿” 这个术语。随后，Preact 的创造者 Jason Miller 在 2020 年 8 月 11 日扩展了这个概念。

“群岛” 架构的总体思想不像看上去那么简单：在服务器上渲染 HTML 页面，并在高度动态的区域周围注入占位符或插槽 […] 这些区域随后可以在客户端 “激活” 成为小型独立的小部件，重用它们服务器渲染的初始 HTML。实践起来还是很有挑战性的。— Jason Miller, Preact 的创造者。

这种架构模式所依赖的技术也被称为 局部化或选择性激活。相比之下，大多数基于 JavaScript 的 Web 框架会将整个网站作为一个大型 JavaScript 应用程序（也被称为单页应用程序，或 SPA）进行激活和渲染。SPA 提供了简单性和强大的功能，但由于大量使用客户端 JavaScript 也导致存在一些页面加载的性能问题。SPA 在 嵌入 Astro 页面内 时也有其一席之地。但是，SPA 缺乏选择性和策略性激活的原生能力，使得它们对于当今大多数 Web 项目来说是一个笨重的选择。Astro 因为是第一个内置选择性激活的主流 JavaScript Web 框架而变得流行，它使用了由 Sylor-Miller 首次提出的组件岛屿模式。

在 Astro 中，“岛屿” 指的是页面上的任何交互式 UI 组件。你可以将岛屿想象成一个个交互式小组件，漂浮在静态、轻量级、服务器渲染的 HTML 海洋中。

群岛架构示意图，来源：Jason Miller

岛屿始终独立于页面上的其他岛屿运行，且一个页面上可以存在多个岛屿。尽管岛屿在不同的组件中运行，它们仍然可以共享状态并相互通信。这种灵活性使得 Astro 能够支持多个 UI 框架，如 React、Preact、Svelte、Vue 和 SolidJS。由于它们是独立的，你甚至可以在每个页面上混合使用多种框架。

【第2804期】Islands 架构原理和实践

Astro 群岛的最明显的好处就是性能：你网站的大部分区域都被转换为了快速、静态的 HTML，JavaScript 只有在需要的时候才会加载到各个组件中。JavaScript 是一个加载得最慢的资源。每一个字节都影响着用户的体验！

另一个好处是并行加载。在上面的一些假想例子中，重要性更低的图像轮播不应该阻挡更重要的页头部分的加载。它俩并行加载但独自激活（hydrate），这表明用户并不需要等着更沉重的图像轮播加载完毕就可以与页头交互了。

更好的地方在于：你可以准确地告诉 Astro 如何以及何时渲染每个组件。如果该图像轮播的加载成本真的很高，你可以附加一个特殊的客户端指令，告诉 Astro 仅在轮播在页面上可见时才加载它。如果用户从未看到它，它永远不会被加载。

2、UI 无关：支持 React、Preact、Svelte、Vue、Solid、Lit、HTMX、Web 组件等等。

正是由于 Astro 是群岛架构，每个组件是相互独立的，非常灵活。这种灵活性，使得 Astro 能够支持多个主流 UI 框架，如 React、Preact、Svelte、Vue、Solid 组件等。

【早阅】了解Astro 4.10中的环境变量和容器

下面从一个 demo 中来看 Astro 是如何去做多框架渲染的。

index.astro 中引入 React 和 Vue 组件

 ---
 import Header from '../components/Header/index.tsx'
 import Footer from '../components/Footer/index.vue'
 ---

 <div>
   <Header client:idle />
   <Footer client:idle />
 div>

React 文件内容

 import React from 'react';
 export default function() {
     return (
         <div>
           <p>react headerp>
         div>
     )
 }

Vue 文件内容

 <script setup>
 import { ref, onMounted } from 'vue'
 const words = ref('vue footer')
 onMounted(() => {
   console.log(123)
   words.value = 'vue footer 2'
 })
 script>

 <template>
   <div class="vue-footer-cont">
     <p>{{ words }}p>
   div>
 template>

SSR 模式输出的 html 部分

 <astro-island
     uid="r30xB"
     prefix="r0"
     component-url="/_astro/index.db5e9ed3.js"
     component-export="default"
     renderer-url="/_astro/client.802dacf3.js"
     props='{"data-astro-cid-j7pv25f6":[0,true]}'
     ssr=""
     client="idle"
     opts='{"name";"Header", "value":true}'
     await-children=""
 >
     <div>
         <p>react headerp>
     div>
     
 astro-island>

 <astro-island
     uid="X0T3U"
     component-url="/_astro/index.6bfab11a.js"
     component-export="default"
     renderer-url="/_astro/client.6f88b9f8.js"
     props='{"data-astro-cid-j7pv25f6":[0,true]}'
     ssr=""
     client="idle"
     opts='{"name":"Footer", "value":true}'
     await-children=""
 >
     <div class="vue-footer-cont" data-astro-cid-j7pv25f6="true">
         <p>vue footerp>
     div>
     
 astro-island>

• component-url：原始组件逻辑代码

• renderer-url：组件渲染时需要的代码，如 React 的 jsx-runtime。通过改写，支持.astro 组件 renderToString。

从输出的 html 部分内容与 React 和 Vue 源码可以简单观察到，Astro 是使用 React 和 Vue 的 SSR 模式协助渲染输出内容。外边包一层自定义标签，标签属性记录一些岛屿组件状态、渲染和逻辑 js 代码地址等，用来实现传递数据，群岛按需加载，状态标记等功能。

3、服务器优先：将沉重的渲染移出访问者的设备。

在 Astro 中，大部分处理都是在服务器上进行，而非浏览器中。这通常使你的网站或应用在性能羸弱的设备或在较慢的互联网连接上查看时比客户端渲染更快

4、默认无 JS：让客户端更少的执行 JS ，以提升网站速度。

Astro 默认不使用客户端渲染。它们在构建时或使用服务器端渲染（SSR）按需呈现为 HTML，默认情况下不用任何 JavaScript。当需要交互必须写 js 时，可以利用客户端指令或者 inline script。

5、可定制：Tailwind、MDX 和数百个集成可供选择。

Astro 官方和社区提供了丰富的可定制的功能，比如多 UI 框架、多 SSR 托管平台适配器、Astro db、tailwind、MDX 等。只需要运行一行或几行命令，就可以为你完成必要的配置更改。

Web SSR 类框架性能对比

通过 CWV (Core Web Vitals，核心页面指标) 的网站百分比：使用特定框架的网站，通过谷歌核心网络指标评估的占比，通过意味着性能更好。

【第3387期】多种前端框架SSR性能大比拼

Astro 的 CWV 通过率最高，接近 70%

通过 CWV 的站点百分比

LCP 指标

通过 LCP 的站点百分比

FID 指标

通过 FID 的站点百分比

CLS 指标

通过 CLS 的站点百分比

通过谷歌的 CWV 测试，能看出来 Astro 的性能的确强劲。可以在我们的业务上做一些落地尝试。

项目实践

首先确定实践方向

在 APP 内的 H5：CSR 转向 SSR，减少前端的 js 体积。目前的前端业务，采用 React 和 Vue，大部分都是 CSR 渲染模式，js 体积庞大，性能并不是最优。SSR 和 SSG 能大幅减少体积，提升性能。

SEO 页面优化：当前主站 SEO 页面是基于 Vue 的 SSR+JQuery 模式，没有用框架。项目配置较复杂，上手成本较高。可以利用 Astro 的服务器优先策略，默认支持 SSR 模式。配置简单，上手成本低。UI 无关，可以不用框架，或者少用框架，即可快速搭建页面。

活动类型的业务：当前业务中，存在多技术栈的组件，Vue 和 React 组件均有，可以利用 UI 无关的特点，利用已有组件快速搭建活动页面。

示例项目

下面以业主认证页面为例子，介绍一下一些实践细节。以下是一个内容展示页面，用于介绍业主认证的一些流程和好处。