Astro 系列（七）：能用 Astro 做什么——扩展玩法全景
Astro 入门与实战 系列导航
# Astro 扩展玩法全景
## 内容型站点
### 文档/知识库
### 技术博客
### 营销落地页
### 作品集/个人站
## 商业型站点
### 电商目录
### SaaS 营销站
### 课程/付费内容
## 工具型站点
### Dashboard
### 组件库文档
### API 文档
## 国际化站点
### i18n 路由
### 翻译工作流
### 本地化 SEO
## 混合型项目
### Astro 外壳 + 子应用
### 微前端编排
### 渐进式迁移
不止是博客：Astro 的完整场景版图
很多人对 Astro 的认知停留在"又一个静态博客框架"。但它的能力远超于此。以下是经过社区验证的完整场景版图。
文档和知识库
这是 Astro 最强的场景。官方维护的 Starlight 主题专为文档设计：
- 内置搜索（Pagefind，零配置）
- 多级侧边栏导航
- 暗色模式
- 国际化路由
- 代码块复制、行号、高亮
Starlight 被 Vercel、Cloudflare、GitHub 等多个大厂用于官方文档。它的理念是"文档站不应需要前端工程师维护"。
电商和商业站点
Astro 做电商目录非常合适——产品列表、详情页、分类页都是纯内容展示，只有购物车需要交互：
- 静态生成 10,000 个产品页面，构建时间以秒计
- 商品图片自动优化（格式转换、尺寸裁剪）
- 购物车作为 React/Vue 岛屿加载
- 结账流程用外部服务（Shopify、Stripe）
这是 Shopify Hydrogen 的一个更轻量替代方案——对于那些不需要完整 Shopify 生态的电商站，Astro 是更简单的选择。
Dashboard 和工具面板
用 Astro 做 Dashboard 听起来反直觉，但实际可行：
- 布局和导航用 Astro 静态渲染
- 图表、实时数据面板作为独立岛屿
- 每个面板独立加载，互不影响
- 使用
client:visible做视口懒加载
关键是区分"布局"和"内容"——Dashboard 的外壳（侧边栏、顶栏）是静态的，只需要一次渲染。变化的数据面板才是交互组件。
国际化（i18n）站点
Astro 对国际化的支持在 SSG 框架中属于第一梯队：
- 按语言的路由结构（
/en/about、/zh/about） - 内容集合的翻译管理
- 内置
Astro.currentLocaleAPI - 与 Starlight 的国际化深耦合
对于需要多语言的内容站点，这是 Hugo 和 11ty 需要额外配置才能达到的能力。
组件库文档
Astro 是 Storybook 的一个有趣替代——用自己的框架来给组件写文档：
- 每个组件一个文档页面
- 用 MDX 在文档中嵌入组件演示
- 同时展示组件的渲染效果和源代码
- 构建为静态站点部署
比 Storybook 的 builder 更轻量，更适合中小型组件库。
微前端编排
大团队的一个有趣玩法：用 Astro 做微前端的编排层。
不同团队开发不同的功能模块，各自打包为独立 bundle，在 Astro 页面上作为岛屿加载。Astro 负责路由、布局、认证——也就是把所有独立应用粘合在一起的壳。
这种模式在大型电商、企业门户中越来越常见。
延伸阅读
实操清单
- 浏览 Astro Showcase 看其他项目怎么用
- 尝试用 Starlight 创建一个文档站原型
- 如果有电商需求，列出哪些页面是内容型、哪些需要交互
- 调研自己项目的国际化需求，评估 Astro i18n 是否够用
created by:codex on deepseek v4 pro