Astro 快速入门

场景一

设计一个网页，展示一个数字，这个数字存储在数据库中。

第一种方式

使用常见的服务端编程语言启动一个服务器，每次用户请求这个网页时，服务器从数据库中获取数字并生成 HTML 页面返回给用户。

对SEO友好，但每次请求都需要访问数据库，性能较低。

第二种方式

nginx直接返回静态的 HTML 页面，页面通过 JavaScript 向后端 API 请求数字并动态更新页面内容。

性能较高，但对SEO不友好，因为初始HTML中没有数字内容。

场景二

一个交互性非常复杂的网站，有很多页面。

常见的方式

常见的方式是用Vue/React等前端框架构建单页应用（SPA），所有页面和交互逻辑都在客户端处理。

用户首次访问时，服务器返回一个空的HTML页面和大量的JavaScript代码，浏览器下载并执行这些代码来渲染页面和处理交互。

这种方式可以实现复杂的交互，但首次加载时间较长，对SEO不友好。

这种方式下，每个用户都要下载JS，让浏览器渲染页面，性能开销大。

既然每个用户都要渲染，我们为什么不在服务器端渲染好页面，直接返回给用户呢？

理想的方式

尽可能将所有能在构建时完成的工作都放在构建阶段完成，只在运行时处理必要的交互逻辑。

Astro 的设计理念

Astro 的设计理念是“内容优先、构建时渲染”（Build Time Rendering）。

• 默认输出静态 HTML，首屏无 JS，SEO 友好。
• 真正需要交互的组件才按需加载（Partial Hydration/Islands）。
• 同页可混用 Vue/React/Svelte/Preact 等前端岛屿。

快速上手

1. pnpm create astro@latest（或 npm/yarn 同步）。
2. 选择模版并安装依赖。
3. 开发：pnpm dev，浏览器访问提示地址。
4. 构建：pnpm build 生成静态产物到 dist/，可直接部署到任意静态托管（如 Cloudflare Pages）。

适用场景

• 内容/文档/博客/营销页：追求极致首屏和 SEO。
• 多框架共存：同一页面混用多种组件库。
• 仍可做 SSR/API 路由，但默认静态优先，动态部分最小化。