AI AI 工具指南
独立开发 / 建站指南

Astro 适合做什么网站

Astro 6 决策指南（2026 年 6 月）：什么项目形态适合 Astro，什么时候该换 Next.js 或 Hugo，以及动手前用一天 spike 验证清楚。

发布于: 更新于: 作者: AI Productivity Guide Team 🌐 查看英文版本

2026 年，内容型网站的最佳默认选择就是 Astro，但它不是万能答案。项目形态选错，加每个功能都会跟框架较劲。本文基于 Astro 6（2026 年 3 月 10 日转正），讲清楚 Astro 在哪里赢、什么时候该换 Next.js 或 Hugo，以及动手前用一天 spike 把问题定下来。

一句话结论

  • 内容是产品时用 Astro——博客、文档、营销页、小型商品目录。默认几乎不打包 JS，稍微调一调就能拿到漂亮的 Core Web Vitals。
  • 交互是产品时用 Next.js——仪表盘、多步应用流程、客户端深层路由和共享状态。
  • 连 Astro 都嫌重时用 Hugo 或纯 HTML——上千页、要秒级重建的文档站，或者五页的宣传册。
  • Astro 6 要求 Node 22.12 以上，用 Vite 7 和 Zod 4，内容配置文件挪到了 src/content.config.ts。如果你照着 Astro 4 的教程抄，下面几个 API 都变了。

2026 年变了什么（所以老教程会坑你）

今年有两件事重置了格局。第一，Cloudflare 在 2026 年 1 月 16 日收购了 The Astro Technology Company，核心团队整建制加入 Cloudflare。框架仍然开源（MIT），但 Cloudflare adapter 现在是一等公民：Astro 6 的开发服务器直接跑在 workerd 上——就是 Cloudflare Workers 生产环境用的同一套运行时，所以 KV、D1、R2、Durable Objects 这些绑定在本地开发就能用，不再靠模拟层。

第二，Astro 6 在 2026 年 3 月 10 日转正，带来一批破坏性改动，让很多旧的复制粘贴直接失效：

  • output: 'hybrid' 没了。现在只有两种模式：static（默认，页面预渲染）和 server。混合站点用 static 加上逐页的 export const prerender = false。
  • 内容配置文件从 src/content/config.ts 挪到了 src/content.config.ts，v5 的过渡期已经结束。
  • collection 必须声明 loader（glob 或 file）——旧的自动 collection API 被移除了。
  • schema 辅助变了：z 要从 astro/zod 引入，不再从 astro:content。

教程里要是还写着 output: 'hybrid' 或者从 astro:content 引 z，那它就是 Astro 6 之前的。

适配测试：你的站点是 Astro 形态吗？

下面这些大部分成立时，Astro 就是合理默认：

  • 站点主要是静态内容——博客、文档、营销页、小型商店。
  • 想拿到顶级 Core Web Vitals（LCP、INP、CLS），又不想手动调打包器。
  • 不需要跨多页面共享复杂的客户端状态。
  • 能接受写 .astro 或 .mdx 文件。
  • 团队小，不需要重型全栈应用框架的强约束。

决定性的那个问题：把站点要的页面类型全列出来（营销、博客、文档、仪表盘、结账），挨个标”静态”还是”交互”。如果 静态占 70% 以上，Astro 就是对的默认。如果大部分是交互式应用界面，你绕开 Astro 的时间会比用它的时间还多。

Astro 与其他选项对比（2026 年 6 月）

Astro 6Next.js 15Hugo纯 HTML
默认打包 JS内容页约 0 KB默认对整条路由 hydrate0 KB0 KB
最适合内容 + 少量岛屿应用型、强交互超大静态站极小宣传册站
Markdown/MDX原生，内容层带类型靠 MDX 插件原生（无 MDX）手写
UI 组件React、Vue、Svelte、Solid、Preact仅 ReactGo 模板无
大站构建速度快；v5 内容层省了 25-50% 构建内存中等最快即时
SSR / 动态output: 'server' + adapter内建，一等公民无（仅静态）无
部署静态处处能跑；SSR 靠 adapter在 Vercel 类平台最佳静态处处能跑处处能跑

注：“几乎零 JS”只针对纯内容页。每加一个交互岛屿（client:load、client:visible），都会按需打包它自己的组件和运行时——这份成本只在你 opt-in 的地方付。

一天 spike：动手前先验证

中途换框架代价很高。花一天，拿你真实的内容验证一下 Astro 再决定。

1. 起官方模板。 Starlight 是文档模板；想要空白站用 --template basics。

npm create astro@latest -- --template starlight my-spike
cd my-spike
npm install
npm run dev      # http://localhost:4321

2. 接一次 content collection——这是 Astro 最强的能力，也是决定前必须亲手试的事。注意 Astro 6 的写法：文件是 src/content.config.ts，要传 glob loader，z 从 astro/zod 引。

// src/content.config.ts  (Astro 6)
import { defineCollection } from 'astro:content';
import { glob } from 'astro/loaders';
import { z } from 'astro/zod';

const articles = defineCollection({
  loader: glob({ pattern: '**/*.{md,mdx}', base: './src/content/articles' }),
  schema: z.object({
    title: z.string(),
    publishedAt: z.coerce.date(),
    tags: z.array(z.string()).default([]),
    draft: z.boolean().default(false),
  }),
});

export const collections = { articles };

在 src/content/articles/hello.mdx 放一篇示例，再用 getCollection('articles') 渲染。这套”带类型 front matter”的流程顺手，答案就有了。

3. 只接你真正需要的那一个 UI 框架。 别同时混三个。

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>

4. 构建后看产物。 不含岛屿的纯内容页，基本不应该打包任何 JS。

npm run build
ls -lh dist/_astro/*.js 2>/dev/null | head
# 不含岛的内容页基本 0 KB JS

5. 确认目标 host。 静态输出处处能跑。需要 SSR 就把 output 设成 server 并加 adapter——记住 hybrid 已经不存在了。

// astro.config.mjs —— SSR 示例（Astro 6）
import { defineConfig } from 'astro/config';
import cloudflare from '@astrojs/cloudflare';

export default defineConfig({
  output: 'server',
  adapter: cloudflare(),
});

如果是以静态为主、只有几条动态路由，保持默认的 static 输出，把那几页单独 opt out：

---
// src/pages/preview/[id].astro
export const prerender = false;   // 这条路由在服务端渲染
---

容易踩的坑

  • 把 Astro 选去做应用型项目，每加一点交互都别扭。先做 70% 静态测试。
  • 一次接太多 UI 集成（React + Vue + Svelte）。每个都带自己的运行时，挑一个就好。
  • 不用 content collection 而是临时存数据——等于丢掉类型化 front matter 和构建期校验。
  • 照抄 Astro 4/5 的配置：output: 'hybrid'、src/content/config.ts、从 astro:content 引 z，在 Astro 6 上都会报错。
  • 以为 Astro 能替 CMS。非技术编辑还是需要 CMS（Astro 6 转正的 live content collections 可以在请求时从 Contentful、Sanity、WordPress 拉数据）。
  • 把静态内容部署到重服务端的平台，静态 CDN 本来更便宜也更快。

这篇适合谁

做内容站、文档、营销页、小作品集的独立开发者——以及任何在内容优先项目上纠结 Astro 还是 Next.js 的人。

什么时候别用 Astro

做仪表盘、复杂 SaaS、客户端状态和路由很深的产品。那种活，Next.js 15 的应用优先模型和 React 全家桶默认更对路。

FAQ

  • 2026 年 6 月，Astro 能上生产吗: 可以。Astro 6 自 2026 年 3 月 10 日起稳定，跑在 Vite 7 和 Node 22.12 以上，很多生产级内容站都在用。Cloudflare 收购（2026 年 1 月）后它仍然 MIT 开源。
  • 新项目该用 Astro 5 还是 6: 直接上 Astro 6。大部分破坏性改动都在配置层（src/content.config.ts、glob loader、从 astro/zod 引 z），新建在 6 上比以后再迁移省事。
  • Astro 里能用 React 吗: 能，开 React 集成即可。岛屿只在你用 client:load 之类指令 opt-in 的地方加载 React，其他部分仍然零 JS。Vue、Svelte、Solid、Preact 同理。
  • 它和 Hugo / Eleventy 比怎么样: Astro 更灵活，想在任意位置加 JS 组件、要原生 MDX 都行；Hugo 在超大静态站上原始构建速度更快；Eleventy 最极简。按生态和写作体验匹配度选。
  • 静态站还需要 adapter 吗: 不需要。默认的 static 输出会预渲染全部页面，不用 adapter 就能部到任何 CDN。只有切到 output: 'server' 或让某些路由跳过预渲染时才加 adapter。
  • 旧的 hybrid 输出模式被什么取代了: 它被移除了。全站用 static（默认），给必须在服务端渲染的单条路由加 export const prerender = false。

相关阅读

外部参考：Astro 6.0 发布说明 与官方 content collections 指南。

标签: #独立开发 #Astro #MDX #对比 #入门

相关文章