特点#

以内容为中心#

以”内容”为中心，而非”服务” 内容丰富的网站，包括：营销网站、出版网站、文档网站、博客、个人作品集和一些电子商务网站。而大多数现代 Web框架都是为构建 Web应用程序而设计的，构建更复杂、类似应用程序的体验。

服务器优先#

尽可能利用服务器渲染，而不是客户端渲染. Vue / React 是 SPA Astro 是一个 MPA 框架

默认快速#

与 React Web 框架构建相同的网站进行比较，Astro 网站的加载速度快 40%，JavaScript 减少 90%

Astro 群岛#

“Astro 群岛“指的是静态 HTML 中的交互性的 UI 组件。一个页面上可以有多个岛屿，并且每个岛屿都被独立呈现。你可以将它们想象成在一片由静态（不可交互）的 HTML 页面中的动态岛屿。 Astro 默认生成不含客户端 JavaScript 的网站。如果使用前端框架 React、Preact、Svelte、Vue、SolidJS、AlpineJS 或 Lit，Astro 会自动提前将它们渲染为 HTML，然后再除去所有 JavaScript。这使得 Astro 创建的网站默认非常迅速，因为 Astro 帮你自动清除了所有页面上的 JavaScript。

1
---
2
// 例子：在此页面使用一个静态的 React 组件，没有 JavaScript。
3
import MyReactComponent from '../components/MyReactComponent.jsx';
4
---
5
<!-- 100% HTML，没有 JavaScript 在这个页面上！ -->
6
<MyReactComponent />

但是有些时候，响应式的 UI 是需要客户端 JavaScript 的。你不该将整个页面做成一个像 SPA（单页面应用）一样的 JavaScript 应用，相反，Astro 允许你创建岛屿。

1
---
2
// 例子：在此页面上使用一个动态 React 组件
3
---
4
<!-- 现在这个组件是可交互性的了！
5
  网站的其他部分仍然是静态、没有JavaScript的。 -->
6
<MyReactComponent client:load />

使用 Astro 群岛，你的大部分页面保持着纯正、轻盈的HTML和CSS。在上面的例子中，你仅仅添加了一个简单的、孤立的可响应岛屿，而并没有改变任何页面其他部分的代码。

好处：

网站的大部分区域都被转换为了快速、静态的 HTML，JavaScript 只为单独组件而被加载

重要性更低的图像轮播不应该阻挡更重要的页头部分的加载。这两样东西被并行加载并被分别单独组建，这表明阅读者并不需要等着更沉重的图像轮播加载完毕就可以与页头交互了

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

在 Astro 中，作为开发人员，你可以明确告诉 Astro 你的页面上的哪些组件也需要在客户端浏览器中运行。Astro 只会准确地补充页面上需要交互性的内容，并将您网站的其余部分保留为静态 HTML

项目结构#

1
src/
2
├── components/
3
├── layouts/
4
├── pages/
5
    ├── index.astro
6
├── styles/
7
public/*
8
package.json
9
astro.config.mjs       (可选)
10
tsconfig.json

组件#

可以通过 .astro 来创建新的 Astro 组件. (也可以集成其它框架, 然后使用 .vue 或 .jsx) 主要由 组件 script 和 组件模板

1
---
2
// 组件脚本（JavaScript）
3
---
4
<!-- 组件模板（HTMl + JS 表达式） -->

组件 script#

用来编写渲染模板所需的 JavaScript 代码，可以包括：

导入其他 Astro 组件
导入其它框架组件
导入数据，如 JSON 文件
从 API 或数据库中获取内容
创建你要在模板中使用的变量

1
---
2
import SomeAstroComponent from '../components/SomeAstroComponent.astro';
3
import SomeReactComponent from '../components/SomeReactComponent.jsx';
4
import someData from '../data/pokemon.json';
5

6
// 访问传入的组件参数，如 `<X title="Hello, World"/>`
7
const {title} = Astro.props;
8
// 获取外部数据，甚至可以从私有 API 和数据库中获取
9
const data = await fetch ('SOME_SECRET_API_URL/users').then (r => r.json ());
10
---
11
<!-- 你的模板在这！ -->

组件模板#

决定组件的 HTML 输出，可以包括：

普通 HTML
JavaScript 表达式（包括组件script中定义的变量）
使用导入的组件
特殊的 Astro 指令

1
---
2
import ReactPokemonComponent from '../components/ReactPokemonComponent.jsx'
3
const arr = [/* ... */]
4
let visible = true
5
---
6

7

8
<h1>h1</h1>    <!--   1.普通内容   -->
9

10
<p>本讲内容：{Astro.props.title}</p>   <!--  2.使用: 变量   -->
11

12
<ReactPokemonComponent client:visible />  <!-- 3.使用: 组件、`client:` Astro指令 -->
13

14
  <!-- 4.混合 HTML 和 JavaScript 表达式，类似于 JSX： -->
15
  <ul>
16
    {arr.map ((data) => <li>{data.name}</li>)}
17
  </ul>
18

19
  <!-- 5.使用模板指令并根据字符串或对象来生成 class 名 -->
20
  <p class:list={["add", "dynamic", {classNames: true}]} />
21

22

23
  {visible && <p>Show me!</p>}    <!-- 6.如果 visible变量为真，才显示后面内容 -->
24

25
  {visible ? <p>Show me!</p> : <p>Else show me!</p>}   <!-- 7.三元表达式 -->