2024前端开发 - 重点专题01 - Astro框架介绍

学习系列目录

热门话题系列

什么是Astro？

Astro（40K star）是一个为构建内容驱动型网站（如博客、营销和电子商务网站）而设计的Web框架。它的一个显著特点是默认情况下尽可能少地发送客户端JavaScript，除非用户另有指定。这种做法被称为"Islands（岛屿）架构"，它允许开发者在同一个项目中结合使用不同的UI框架，如React、Svelte和Vue。

Astro专注于内容优先、对搜索引擎优化（SEO）友好的网站，以及它提供的良好的开发者体验（DX），这使得它成为构建现代静态Web应用的一个引人注目的选择。

Astro使用的大公司案例和行业反馈

Astro自推出以来，受到了许多大型技术公司的青睐，例如：Google Firebase， MicroSoft Fluent2。

"对我们来说，Astro能够生成完全静态的文件非常重要。这对我们非常有利，因为我们希望能够防御多种问题，例如DDoS攻击。因此，拥有一个高度依赖后端服务的产品可能会导致问题。在这个时代，拥有一个完全静态的网站，并将其托管在Azure上，对于安全性和可扩展性来说非常有利。"

--- Tudor Popa, 微软工程经理（Fluent 2）

Astro的主要应用场景及优势

Astro最适用于构建快速、高效的静态网站，如博客、文档站点以及营销网站。由于其出色的性能表现，Astro也常被用于电子商务网站的前端开发，以及任何对SEO和加载速度有较高要求的场景。

谷歌的核心网络指标（Core Web Vitals，简称CWV）是一组标准化的三项指标，用以衡量用户在浏览网页时的体验。每个指标分别测量用户体验的不同方面------加载速度、交互响应性和视觉稳定性，三者共同决定了网站的整体性能。

在所有已知使用某一框架构建的网站中，Astro的表现尤为突出，它是唯一一个Google核心网页指标（CWV）合格率超过50%的框架。而SvelteKit也超过了平均合格率（40.5%），其他框架则未能达到这一水平。

Astro的技术原理

Astro框架的技术原理主要基于以下几个方面，这些特性共同定义了Astro的强大性能和开发者体验：

默认情况下不发送任何客户端JavaScript（Ships zero client-side JavaScript by default）：Astro默认生成的网站不包含客户端JavaScript代码，使页面加载速度极快，同时提升了网站的总体性能。
Islands（组件级部分水合）：Astro采用了一个独特的"Islands"架构，允许开发者独立地为需要客户端交互的组件加载JavaScript，而不是整个页面。这一点类似于懒加载，但是在组件级别上实现，从而最大化性能。
View Transitions（视图转换）：Astro提供了视图过渡和页面切换的功能，即使在一个静态网站中也能实现平滑的用户体验，而这通常仅在客户端JavaScript框架中才能见到。
Great DX（出色的开发体验）：Astro注重开发者体验，提供了快速的重载、有用的错误消息和丰富的开发文档，确保开发者能够轻松上手并享受编码过程。
官方和用户提交的起始模板和主题：Astro社区及其官方渠道提供了多种起始模板和主题，这使得快速启动新项目变得简单，同时也能够灵活地适应不同的设计需求。
官方和用户提交的集成：Astro提供了广泛的集成支持，包括但不限于对React、Vercel、Tailwind等的支持。这意味着开发者可以轻松地将Astro与他们已经熟悉和喜爱的工具和框架结合起来，无缝地融入现有的工作流程中。

使用Astro构建一个简单的博客站点

以下是构建一个简单Astro博客站点的基本步骤：

为了创建一个使用Astro框架的简单博客网站，你需要遵循以下步骤和目录结构。这里假设你已有基本的Node.js和npm/yarn知识，并已安装在你的开发环境中。

安装Astro CLI：
sh 复制代码
```
npm init astro
```
或者如果你使用yarn：
sh 复制代码
```
yarn create astro
```
然后按照提示完成创建新项目的过程。

项目目录结构：

假设你的博客项目结构如下：

plaintext 复制代码

/src
├── /components
│   └── Tag.astro
├── /pages
│   ├── index.astro
│   ├── post1.astro
│   ├── post2.astro
│   └── post3.astro
└── /styles
    └── global.css

创建博客文章：

在/src/pages/目录下创建.astro文件来表示你的博客文章。例如：

astro 复制代码

<!-- src/pages/post1.astro -->
---
// Frontmatter script
const title = "博客标题1";
const date = "2024-03-01";
const tags = ["tag1", "tag2"];
---
<html>
  <head>
    <title>{title}</title>
  </head>
  <body>
    <h1>{title}</h1>
    <p>发布日期: {date}</p>
    <p>这是第一篇博客文章的内容。</p>
    <footer>
      <p>标签：</p>
      {/* 使用Tag组件展示标签 */}
      {tags.map(tag => <Tag tag={tag} />)}
    </footer>
  </body>
</html>

重复这个过程，创建post2.astro和post3.astro。

创建标签组件：

在/src/components/目录下创建Tag.astro文件：

astro 复制代码

<!-- src/components/Tag.astro -->
<span class="tag">{props.tag}</span>
<style>
  .tag {
    background-color: #e0e0e0;
    padding: 5px 10px;
    margin: 2px;
    border-radius: 5px;
  }
</style>

添加全局样式：

在/src/styles/目录下创建global.css：

css 复制代码

/* src/styles/global.css */
body {
  font-family: Arial, sans-serif;
}

然后在src/pages/index.astro中引入它：

astro 复制代码

<!-- src/pages/index.astro -->
---
import "../styles/global.css";
---
<html>
  <head>
    <!-- ... -->
  </head>
  <body>
    <!-- 网站内容 -->
  </body>
</html>

启动本地开发服务器：
sh 复制代码
```
npm run dev
```
或者如果你使用yarn：
sh 复制代码
```
yarn dev
```
构建项目：

当你准备将你的网站部署到生产环境时：
sh 复制代码
```
npm run build
```
或者如果你使用yarn：
sh 复制代码
```
yarn build
```