乐闻世界logo
5月27日 21:05

什么是 Astro 框架，它的核心特性和工作原理是什么？

核心回答

Astro 是一个以内容驱动为核心的现代 Web 框架，最大特点是默认零 JavaScript——构建产物只有纯 HTML，除非你主动引入交互。

它的核心特性有三个：

  1. 岛屿架构：页面上每个交互组件是一个独立的"岛屿"，其余部分是静态 HTML。只有标记了 client:* 指令的组件才会在浏览器中加载 JS 并水合。这意味着页面可以按需加载交互，而不是整个页面打包成一个 JS bundle。

  2. UI 无关性：同一个项目里可以混用 React、Vue、Svelte 等框架的组件。Astro 不绑定任何 UI 库，你按需引入即可。

  3. 服务器优先渲染：组件代码在构建时（或 SSR 请求时）于服务端执行，输出 HTML。浏览器收到的是最小化的页面，不携带多余的运行时。

工作原理

Astro 组件用 --- 分隔服务端脚本和客户端模板：

astro
---
// 构建时执行，可异步获取数据
const posts = await fetch('/api/posts').then(r => r.json());
---

<h1>文章列表</h1>
{posts.map(post => <p>{post.title}</p>)}

--- 上方是服务端代码，下方编译为 HTML。客户端拿到的只有渲染结果，没有框架运行时。

与 Next.js 的关键区别

Astro 构建多页应用（MPA），页面间靠原生导航跳转；Next.js 本质是 SPA 架构，即使做了 SSG 也要加载 React 运行时做水合。Astro 只在你写了 client:load 的组件上才水合，其余部分零 JS。

面试追问

  • client:only 和 client:visible 有什么区别？——前者跳过服务端渲染直接在客户端加载，后者在组件进入视口时才加载 JS。
  • Astro 适合哪些项目？——博客、文档站、营销页等内容密集型站点。不适合强交互的仪表盘或 SPA 应用。
标签：Astro