Astro 是内容型网站的不错默认选择，但不是万能答案。这篇讲清楚它擅长什么、卡在哪、怎么决定。
问题背景
Astro 流行起来，是因为它默认几乎不打包 JS，让内容站又快又便宜。但同样的架构在做强交互应用时很别扭。到 2026 年，Astro 已经成熟，问题不是”它行不行”，而是”适不适合我这个项目的形态”。
判断标准
- 站点主要是静态内容——博客、文档、营销页、小型商店。
- 想轻松拿到漂亮的 Core Web Vitals。
- 不需要跨多页面共享复杂的客户端状态。
- 能接受写
.astro或.mdx文件。 - 团队小，不需要重型应用框架的强约束。
快速结论
内容是产品时用 Astro；交互是产品时用 Next.js；连 Astro 都嫌重时用纯 HTML。
实操步骤
-
列出站点的页面类型：营销、博客、文档、仪表盘、结账。挨个标”静态”或”交互”，静态占 70% 以上 Astro 就是合理默认。
-
起官方模板，先跑起来再决定：
npm create astro@latest -- --template starlight my-spike
cd my-spike
npm install
npm run dev # localhost:4321- 接一次 content collection——这是 Astro 最强的能力，也是决定前必须亲手试的事：
// src/content/config.ts
import { defineCollection, z } from 'astro:content';
const articles = defineCollection({
type: 'content',
schema: z.object({
title: z.string(),
publishedAt: z.date(),
tags: z.array(z.string()).default([]),
draft: z.boolean().default(false),
}),
});
export const collections = { articles };在 src/content/articles/hello.mdx 放一篇示例，用 getCollection('articles') 渲染。这套流程顺手，答案就有了。
- 需要 React / Vue / Svelte 岛屿，按需加一个，别同时混三个：
npx astro add react # 或 vue, svelte, solid, preact---
// src/pages/index.astro
import Counter from '../components/Counter.tsx';
---
<html>
<body>
<h1>静态标题</h1>
<Counter client:load /> <!-- 只有这个岛会 hydrate -->
</body>
</html>- 构建后看产物，纯内容页的 JS 应该接近 0：
npm run build
ls -lh dist/_astro/*.js 2>/dev/null | head
# 不含岛的内容页基本 0 KB JS- 确认目标 host：静态输出几乎处处能跑；hybrid / SSR 需要 adapter：
// astro.config.mjs —— hybrid 示例
import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel/serverless';
export default defineConfig({
output: 'hybrid',
adapter: vercel(),
});- 一天 spike 完再决定，中途换框架代价高。
容易踩的坑
- 把 Astro 选去做应用型项目，每加一点交互都别扭。
- 一次接太多 UI 框架（React + Vue + Svelte），包体和复杂度同时上升。
- 不用 content collection 而是临时存数据，等于放弃 Astro 最强的能力。
- 以为 Astro 能替 CMS——非技术编辑还是需要前置 CMS。
- 把 Astro 部到重服务端的平台，静态部署本来更便宜更快。
这篇适合谁
做内容站、文档、营销页、小作品集的独立开发者。
这篇不适合谁
做仪表盘、复杂 SaaS、客户端状态和路由很深的应用团队。
FAQ
- 2026 Astro 能上生产吗: 可以。多年稳定，生态成熟，很多生产级内容站都在用。
- Astro 里能用 React 吗: 可以——开 React 集成。只在你 opt-in 的”岛”上加载 React，其他部分仍然零 JS。
- 它和 Hugo / Eleventy 比怎么样: Astro 更灵活，想在任意位置加 JS 组件都行；Hugo 处理超大站点构建更快；Eleventy 最极简。按生态匹配度选。
- 支持 Markdown / MDX 吗: 原生支持。content collection 在 Markdown / MDX 之上提供类型化 front matter。