乐闻世界logo
5月27日 21:05

Astro 支持哪些渲染模式？SSG 和 SSR 有什么区别？

Astro 支持哪些渲染模式？

Astro 支持四种渲染模式：静态生成（SSG）、服务端渲染（SSR）、混合渲染和客户端渲染。其中 SSG 是默认模式，也是 Astro 推荐的首选方案。

SSG 和 SSR 的核心区别是什么？

SSG 在构建时生成 HTML，部署后所有用户看到的内容相同，页面由 CDN 直接分发，TTFB 极低。SSR 在每次请求时动态生成 HTML，可以返回个性化内容，但需要服务器运行时，响应速度取决于服务端处理耗时。

一句话区分：SSG 用构建时间换访问速度，SSR 用服务端计算换内容实时性。

什么时候用 SSG？

内容稳定、更新频率低的页面——博客、文档、营销页、落地页。Astro 默认就是 SSG，不需要额外配置：

javascript
// astro.config.mjs
import { defineConfig } from 'astro/config';
export default defineConfig({ output: 'static' });

动态路由也走 SSG，通过 getStaticPaths 在构建时预生成所有路径。

什么时候用 SSR？

需要实时数据或个性化内容的页面——用户仪表板、购物车、需要鉴权的后台页面。启用 SSR 需要安装适配器并切换 output：

javascript
import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel/server';
export default defineConfig({ output: 'server', adapter: vercel() });

页面逻辑在每次请求时执行，可以读取 Cookie、Session 等请求上下文。

混合渲染怎么用？

大型项目往往既有静态页面又有动态页面。Astro 的混合模式允许逐页指定渲染策略——基础 output 设为 hybrid，然后通过 export const prerender 控制单个页面：

astro
---
export const prerender = true;  // SSG
---
<!-- 这个页面在构建时生成 -->
astro
---
export const prerender = false;  // SSR
---
<!-- 这个页面在请求时生成 -->

这是 Astro 相比其他框架的显著优势：不需要在 SSG 和 SSR 之间做二选一。

client:only 算什么渲染？

client:only 是纯客户端渲染，组件只在浏览器中执行，服务端不输出 HTML。适合不需要 SEO 且交互密集的组件，比如数据可视化图表：

astro
<InteractiveChart client:only="react" />

注意：使用 client:only 的页面对搜索引擎不可见，务必只在确认不需要索引的场景下使用。

追问：Astro 的 Islands 架构和渲染模式有什么关系？

Islands 架构是 Astro 的底层设计哲学——页面主体是静态 HTML（零 JS），只有被 client:* 指令标记的交互组件才会加载并水合。这意味着即使页面启用了 SSR，大部分内容仍然不需要 JavaScript，只有 Islands 区域有运行时开销。理解这一点才能回答"为什么 Astro 的 SSR 比 Next.js 更快"——因为 Astro 默认不发送 JS，按需水合而非全量水合。

标签：Astro