Astro 数据获取

Astro 客户端脚本反复提到，.astro 的组件脚本运行在「构建阶段」，这意味着你在这里发起的网络请求、文件读取，都会在构建时完成，结果被写死进静态 HTML。

这对内容站非常合适，数据在构建时拉一次，用户访问时不需再等请求。

用 fetch 请求接口

---
const res = await fetch('https://api.example.com/posts');
const posts = await res.json();
---
<ul>
  {posts.map((p) => <li>{p.title}</li>)}
</ul>

注意是顶层 await，Astro 组件脚本支持。

读取本地文件

也可以直接读项目里的文件，适合构建期生成目录、读取配置等。

---
import { readFileSync } from 'node:fs';
const pkg = JSON.parse(readFileSync('package.json', 'utf-8'));
---
<p>当前项目版本：{pkg.version}</p>

用 import.meta.glob 聚合内容

想汇总多个文件的数据（比如每个作者一份 json），用 import.meta.glob。

---
const authors = import.meta.glob('../data/authors/*.json', { eager: true });
const list = Object.values(authors).map((m) => m.default); // eager:true 时 glob 直接返回模块，.default 是导出内容
---
{list.map((a) => <p>{a.name}</p>)}

页面级数据获取

对于动态路由页面，常在 getStaticPaths 里统一拉数据，再传给每个页面。

---
import { getCollection } from 'astro:content';
export async function getStaticPaths() {
  const posts = await getCollection('blog');
  return posts.map((post) => ({
    params: { id: post.id },
    props: { post },
  }));
}
const { post } = Astro.props;
---
<h1>{post.data.title}</h1>

构建时 vs 运行时

• 构建时获取（Astro 默认）：数据固定进 HTML，访问快、利于 SEO，但内容更新需重新构建。
• 运行时获取：需要 island 或客户端脚本在浏览器里请求，适合实时数据。

如果你的数据经常变，又不想每次重新构建，可以结合后面讲的客户端指令（Astro 岛屿架构）或 SSR 模式（Astro 部署）。