Astro 是什么：内容优先的现代 Web 框架

很多人第一次听到 Astro，会把它当成又一个「前端框架」。这个理解不算错，但不够准。Astro 自己给的定位很特别：它是为内容驱动的网站而生的 Web 框架。

这一章我们不写代码，先把这件事讲清楚。理解了「它是谁、为谁服务」，后面学组件、学配置才不会迷路。

一句话认识 Astro

Astro 是一个用来建网站的「工具箱」。博客、产品官网、文档站、作品集、落地页，这些以「展示内容」为主的站点，都是 Astro 的主场。

它最有名的一件事，是带头推广了一种叫群岛架构（Islands Architecture）的新思路。这种思路能大幅减少网页里无谓的 JavaScript，让网站打开更快、搜索引擎更友好。

Astro 想解决什么麻烦

要明白 Astro 好在哪，得先看看它出现之前，大家是怎么建站的。

过去十年，React、Vue 这类框架很流行。它们的做法是：把整个网页当成一个大型 JavaScript 程序，在浏览器里一边跑一边「画」出页面。业内管这叫单页应用（Single-Page App，简称 SPA）。

SPA 做复杂交互确实强。但问题也明显：哪怕页面大部分是静态文字，浏览器也得先下载一大坨 JavaScript、跑起来才能显示内容。手机、老电脑、慢网络下，体验就很差。

Astro 的思路相反。它默认把页面在服务端就渲染成纯 HTML，浏览器拿到就能直接显示。只有你明确说「这块要能动」，它才补上相应的 JavaScript。

Astro 的六个看点

官方把 Astro 的亮点归纳成了几条。我们用大白话过一遍。

群岛架构

这是 Astro 的招牌。页面主体是静态 HTML，只有少数「岛屿」（island）是带交互的组件。其余地方零 JavaScript，自然就快。

不挑 UI 框架

你可以用 React、Vue、Svelte、Solid、Preact，甚至原生 Web Components 来写组件。Astro 像个「翻译官」，把这些不同框架的组件统一拼进一个页面。

服务端优先

「服务端优先」的意思是：能放在服务器上做的事，就别丢给访客的浏览器。传统 PHP、WordPress、Rails 都是这么干的，几十年证明很稳。Astro 沿用了这个老派但靠谱的做法。

默认零 JS

只要你不主动加交互，Astro 产出的页面就几乎不含客户端 JavaScript。网页轻了，打开速度自然就上来了。

内容集合

写博客、文档时，内容常是一堆 Markdown 文件。Astro 提供「内容集合」（content collections）来统一管理这些文件，还顺手帮你做类型校验，减少写错字段的尴尬。

高度可定制

Astro 自带几百个集成（integration）。想用 MDX、想接 Tailwind、想优化图片，装个集成就行，不用自己从头搭。

五个设计原则

光说功能还不够。Astro 背后有五条设计原则，理解了它们，你就能猜出 Astro 会怎么「替你做决定」。

内容驱动

Astro 从一开始就是按「内容站」来设计的。官网、文档、博客、作品集、落地页、社区站、电商内容页，都算它的菜。只要你有内容要展示，Astro 就想着怎么让它最快到达读者眼前。

服务端优先

前面提过，Astro 尽量在服务端渲染 HTML。它把渲染昂贵的活从访客设备挪到服务器上，页面首屏速度因此受益。需要客户端交互时，你再「按需开启」。

默认就快

Astro 有个近乎偏执的目标：让你几乎不可能用 Astro 写出一个慢网站。它靠「内容 + 服务端优先」的组合拳来实现这点，很多性能优化是开箱即得的。

数据也支持这个自信。同样一个站，用最流行的 React 框架写，换成 Astro 后能快约 40%，而 JavaScript 量能少到只有原来的约 10%。

容易上手

Astro 想让「所有写网页的人」都能用。它的语法贴近 HTML，你写的 HTML 几乎都能直接当成 Astro 模板。而且它不强制你学 React 那套 hooks、Vue 的 refs 等复杂概念——因为渲染发生在服务端，那些浏览器端的响应式难题大多不存在了。

Astro 团队有句口头禅叫「按需引入复杂度」。先用最简单的 HTML 和 CSS 写个「你好世界」，等真需要更强能力了，再一步步加功能。

站在开发者这边

Astro 提供了不错的开发体验：开箱好用的命令行工具、官方 VS Code 插件、TypeScript 智能提示，还有用十几种语言维护的文档和活跃的社区。它把「让开发者用得爽」当成项目成功的标准。

它和「应用框架」不是一回事

这里要划清一条线。Astro 和 Next.js、Nuxt、SvelteKit、Remix 这类框架，赛道不完全一样。

那些框架主要按「单页应用」的思路设计，整站客户端渲染，服务端渲染只是用来补性能。Astro 反着来：整站默认多页、服务端渲染，客户端渲染只是「补丁式」开启。

所以，如果你是做内容站，Astro 的默认配置就给你最优解。如果你是做高度交互的应用，可能需要 Next.js 那类框架，或者把 Astro 的岛屿用到极致。

小结

这一章我们搞清了三件事：

1. Astro 是给内容站用的框架，不是通用应用框架。
2. 它靠群岛架构做到默认零 JS，所以快、对 SEO 友好。
3. 它奉行内容驱动、服务端优先、默认快、易上手、开发者友好五条原则。

下一章，我们专门拆开「群岛架构」看个明白，理解它到底是怎么让网站变快的。