Astro 快速入门
Astro 核心：构建时尽量输出静态 HTML，运行时只加载必要交互 JS——性能好、SEO 友好、部署简单。
场景一
设计一个网页，展示一个数字，这个数字存储在数据库中。
第一种方式
使用常见的服务端编程语言启动一个服务器，每次用户请求这个网页时，服务器从数据库中获取数字并生成 HTML 页面返回给用户。
对SEO友好，但每次请求都需要访问数据库，性能较低。
服务端渲染流程
用户请求
浏览器发送HTTP请求
HTTP请求
服务器
接收请求
查询数据
数据库
查询数据
生成HTML
服务器
生成HTML
返回响应
返回HTML
浏览器显示页面
特点
- ✅ SEO友好：HTML中包含完整内容
- ⚠️ 性能较低：每次请求都需要访问数据库
- ⚠️ 服务器压力大：需要实时生成HTML
第二种方式
nginx直接返回静态的 HTML 页面，页面通过 JavaScript 向后端 API 请求数字并动态更新页面内容。
性能较高，但对SEO不友好，因为初始HTML中没有数字内容。
静态HTML + API流程
用户请求
浏览器发送HTTP请求
请求静态HTML
返回静态HTML
nginx直接返回HTML文件
HTML + JavaScript
执行JavaScript
浏览器执行JS代码
API请求
后端API
处理API请求
返回JSON数据
更新页面
JavaScript更新DOM
特点
- ✅ 性能较高：静态文件由nginx直接返回
- ⚠️ SEO不友好：初始HTML中没有数据内容
- ⚠️ 需要两次请求：HTML + API
场景二
一个交互性非常复杂的网站，有很多页面。
常见的方式
常见的方式是用Vue/React等前端框架构建单页应用（SPA），所有页面和交互逻辑都在客户端处理。
用户首次访问时，服务器返回一个空的HTML页面和大量的JavaScript代码，浏览器下载并执行这些代码来渲染页面和处理交互。
这种方式可以实现复杂的交互，但首次加载时间较长，对SEO不友好。
这种方式下，每个用户都要下载JS，让浏览器渲染页面，性能开销大。
SPA加载流程
用户请求
浏览器发送HTTP请求
请求页面
返回空HTML
只有基本结构，无内容
下载大量JS
下载JavaScript
框架代码 + 应用代码
执行JS代码
执行JavaScript
浏览器解析并执行代码
渲染页面
页面渲染完成
用户看到完整页面
特点
- ✅ 交互性强：可以实现复杂的客户端交互
- ⚠️ 首次加载时间长：需要下载大量JS代码
- ⚠️ SEO不友好：初始HTML为空
- ⚠️ 性能开销大：每个用户都要在浏览器中渲染
既然每个用户都要渲染，我们为什么不在服务器端渲染好页面，直接返回给用户呢？
理想的方式
尽可能将所有能在构建时完成的工作都放在构建阶段完成，只在运行时处理必要的交互逻辑。
Astro 构建时渲染
构建阶段（Build Time）
构建时获取数据
从数据库/API获取数据
生成静态HTML
生成静态HTML
预渲染所有页面
构建完成，部署静态文件
运行时（Runtime）
用户请求
浏览器发送HTTP请求
直接返回静态HTML
返回静态HTML
包含完整内容
仅加载必要的JS
页面立即显示
快速加载，SEO友好
优势
- ✅ SEO友好：HTML中包含完整内容
- ✅ 性能极佳：静态文件直接返回，无需服务器处理
- ✅ 加载速度快：只加载必要的JavaScript
- ✅ 服务器压力小：无需实时生成HTML
- ✅ 可扩展性强：CDN加速，全球分发
Astro 的设计理念
Astro 的设计理念是“内容优先、构建时渲染”（Build Time Rendering）。
- 默认输出静态 HTML，首屏无 JS，SEO 友好。
- 真正需要交互的组件才按需加载（Partial Hydration/Islands）。
- 同页可混用 Vue/React/Svelte/Preact 等前端岛屿。
快速上手
pnpm create astro@latest（或 npm/yarn 同步）。- 选择模版并安装依赖。
- 开发：
pnpm dev，浏览器访问提示地址。 - 构建：
pnpm build生成静态产物到dist/，可直接部署到任意静态托管（如 Cloudflare Pages）。
适用场景
- 内容/文档/博客/营销页：追求极致首屏和 SEO。
- 多框架共存：同一页面混用多种组件库。
- 仍可做 SSR/API 路由，但默认静态优先，动态部分最小化。