阿超 > astro

astro

2025-03-26

前端

真理的范围在大炮射程之内。——俾斯麦

https://astro.build/

https://github.com/withastro/astro

Astro：为内容驱动的网站打造的现代前端框架

在前端框架百花齐放的今天，React、Vue、Svelte 等已经牢牢占据开发者的视野。而 Astro，则以一种“反潮流”的方式切入了战场——它不试图成为全能框架，而是专注于一个核心场景：内容驱动的静态网站。

什么是 Astro？

Astro 是一个现代的静态网站构建工具，主打“少 JavaScript，多性能”。它允许开发者使用多种框架（React、Vue、Svelte、Solid 等）构建组件，但最终构建时，只会输出最小的 HTML、CSS 和必要的 JS，实现几乎“零 JS 运行时”。

一句话总结：Astro 是为了构建快如闪电的内容网站而生的静态站点生成器。

核心特性

1. 零 JS 默认输出

Astro 默认不会给你的页面添加任何 JavaScript，除非你显式启用交互。这种“按需加载”策略，让页面加载速度大幅提升，非常适合博客、文档、企业官网等。

2. 跨框架组件支持

在一个项目中同时使用 React + Vue + Svelte？Astro 说没问题。你可以将它们作为 UI 组件嵌入 Astro 页面中，而 Astro 只会在你需要的时候渲染它们。

3. 文件即路由

在 src/pages/ 中创建 .astro 文件，就自动变成路由。例如：
src/pages/about.astro → yourdomain.com/about
这个约定大于配置的方式让新手也能快速上手。

4. 集成 Markdown 和 MDX

Astro 支持 Markdown 和 MDX（Markdown + React）混合使用，非常适合内容创作者写博客、写文档。甚至可以直接在 Markdown 中引入组件。

5. Server-first 架构（适配 SSR 和静态）

Astro 默认是构建静态 HTML 文件，但也支持部署为 SSR（如 Vercel、Netlify 等平台），适配各种需求。

使用场景

  • 博客

  • 技术文档站点

  • 产品官网

  • 个人作品集

  • 静态电商页面

如果你对 SEO、性能有高要求，又希望维护简单，那 Astro 是非常值得尝试的选择。

简单示例

这是一个最基本的 .astro 页面：

1
2
3
4
5
6
7
8
9
10
11
12
---
// 这是 frontmatter，用于写服务端逻辑
const name = "Astro 用户";
---
<html>
  <head>
    <title>你好，{name}</title>
  </head>
  <body>
    <h1>欢迎来到 Astro 的世界！</h1>
  </body>
</html>

就像写 HTML 一样简单，但又能引入强大的 JS 组件、Markdown 内容。

我为什么喜欢 Astro？

作为一个写博客的人，Astro 给我带来几个非常实用的体验：

  • 写 Markdown 像写日记一样自然；

  • 组件可复用，主题定制轻松；

  • 构建速度快，部署无压力；

  • 页面打开快，Lighthouse 分数飙满分。

总结

Astro 并不打算与 React 或 Vue 竞争，它是另一个方向的探索：回归内容本身，用尽可能少的 JS 构建更快的网站。

如果你厌倦了大型 SPA 的臃肿，想要一个专注于内容呈现、同时又能保留现代开发体验的框架，Astro 值得你一试。