CSR与SSR两种前端渲染模式

CSR (Client-Side Rendering) - 客户端渲染

核心特点：

• 在用户的浏览器中执行JavaScript来渲染页面
• 服务器只提供空的HTML骨架和JS文件

工作流程：

1. 浏览器请求HTML文档
2. 服务器返回几乎空的HTML（通常只有一个根div）
3. 浏览器下载并执行JavaScript
4. JS获取数据并生成DOM元素
5. 页面最终显示内容

优点：

• ✅ 首次加载后页面切换极快（SPA体验）
• ✅ 前后端分离，开发便捷
• ✅ 丰富的交互效果和动画
• ✅ 服务器压力小

缺点：

• ❌ 首屏加载慢（需要下载所有JS）
• ❌ SEO不友好（早期爬虫无法执行JS）
• ❌ 对低性能设备不友好
• ❌ 初始白屏时间长

代表框架： React、Vue、Angular（默认模式）

---

SSR (Server-Side Rendering) - 服务端渲染

核心特点：

• 在服务器上生成完整的HTML页面
• 浏览器直接接收渲染好的HTML

工作流程：

1. 浏览器请求页面
2. 服务器执行应用代码，获取数据，生成完整HTML
3. 服务器返回已渲染的HTML
4. 浏览器立即显示内容，然后加载JS进行"注水"

优点：

• ✅ 首屏加载快
• ✅ SEO友好
• ✅ 对低性能设备更友好
• ✅ 更好的初始性能体验

缺点：

• ❌ 服务器压力大
• ❌ TTFB（首字节时间）可能较长
• ❌ 开发复杂度更高
• ❌ 页面切换可能较慢

代表方案： Next.js、Nuxt.js、传统PHP/JSP等

---

现代混合方案

1. SSR + CSR Hydration

• 首次访问使用SSR
• 后续交互转为CSR
• Next.js、Nuxt.js的默认模式

2. SSG (Static Site Generation)

• 构建时预渲染页面
• 适用于内容不常变的站点

3. ISR (Incremental Static Regeneration)

• Next.js特有的功能
• 静态生成+定时重新生成

4. Streaming SSR

• 分块传输HTML
• 改善TTFB和LCP

---

选择建议

场景	推荐方案
内容型网站（博客、新闻）	SSR/SSG
管理后台、Dashboard	CSR
电商网站	SSR
复杂Web应用	SSR + CSR混合
对SEO要求高	SSR/SSG

---

示例对比

CSR示例（React）：

// 客户端渲染
function App() {
  const [data, setData] = useState(null);
  
  useEffect(() => {
    fetchData().then(setData);
  }, []);
  
  return data ? <div>{data.content}</div> : <Loading />;
}

SSR示例（Next.js）：

// 服务端渲染
export async function getServerSideProps() {
  const data = await fetchData();
  return { props: { data } };
}

export default function Page({ data }) {
  return <div>{data.content}</div>;
}

---

性能指标对比

指标	CSR	SSR
FCP (首次内容绘制)	较慢	较快
TTI (可交互时间)	可能更早	可能稍晚
SEO	需要额外处理	原生友好
服务器成本	低	高

根据具体项目需求选择合适的渲染策略，现代框架通常支持多种模式的灵活切换。