现代 Web 渲染模式深度解析
现代 Web 渲染模式深度解析
在不断发展的 Web 开发领域，选择正确的渲染策略对于性能和用户体验至关重要。今天，我们将探讨 静态站点生成 (SSG)、服务端渲染 (SSR) 以及由 Astro 和 Next.js 等框架普及的混合方法。
1. 静态站点生成 (SSG)
SSG 是在构建时生成 HTML 的过程。这是 Astro 的默认行为。
优点
- 性能： HTML 是预渲染的，并从 CDN 提供服务。
- 安全性： 运行时没有服务端处理，意味着攻击面更少。
- 成本： 托管静态文件非常便宜。
配置示例 (Astro)
// astro.config.mjs
import { defineConfig } from 'astro/config';
export default defineConfig({
output: 'static', // 默认值
});2. 服务端渲染 (SSR)
SSR 在每次请求时生成 HTML。这对于高度动态的内容非常有用，例如用户仪表板或实时数据流。
注意： SSR 需要服务器环境（Node.js, Deno, Bun）来运行。
何时使用 SSR？
- 个性化内容（例如，“欢迎，Nova”）。
- 构建时未知的动态路由。
- 需要身份验证的受保护路由。
3. 增量静态再生 (ISR)
ISR 允许你在构建网站_之后_更新静态内容。你可以使用它来按特定间隔重新生成静态页面。
| 特性 | SSG | SSR | ISR |
|---|---|---|---|
| 构建时间 | 高 | 低 | 中 |
| 请求响应时间 | 快 | 慢 | 快 |
| 数据新鲜度 | 低 | 高 | 中 |
代码对比
以下是不同模式下的数据获取方式。
客户端获取 (React)
import { useState, useEffect } from 'react';
export function UserProfile() {
const [user, setUser] = useState(null);
useEffect(() => {
fetch('/api/user').then(r => r.json()).then(setUser);
}, []);
if (!user) return <div>加载中...</div>;
return <h1>{user.name}</h1>;
}Astro 组件 (服务器优先)
---
// 这在服务器端（或构建时）运行
const response = await fetch('https://api.example.com/user');
const user = await response.json();
---
<h1>{user.name}</h1>结论
没有“一刀切”的方案。
- 对博客、文档和营销网站使用 SSG。
- 对动态应用使用 SSR。
- 使用 Astro 来混合搭配！
