CSR vs SSR 渲染策略对比

CSR 和 SSR

• CSR（客户端渲染）
  服务器返回基本 HTML，客户端通过 JavaScript（如 React、Vue）渲染内容，常见于单页应用（SPA）。
• SSR（服务器端渲染）
  服务器生成完整 HTML 发送给浏览器，客户端收到后立即显示，常见于 Next.js、Nuxt.js 等框架。

对比

维度	CSR（客户端渲染）	SSR（服务器端渲染）	胜者
首屏加载速度	较慢，用户需等待 HTML 下载、JS 加载和执行，白屏时间长，尤其在慢网络（如 3G）下明显	较快，服务器直接返回渲染好的 HTML，TTFP（Time to First Paint）短，用户立即见内容	SSR
SEO	不友好，爬虫可能抓取空内容；现代爬虫（如 Googlebot）支持 JS 渲染，但效果不稳定	友好，HTML 内容直接可索引，无需依赖爬虫执行 JS	SSR
开发复杂度	简单，前后端分离清晰，只需关注客户端逻辑，配合 SPA 框架上手快	复杂，需处理同构代码（客户端和服务器共用逻辑），服务器配置和调试成本高	CSR
交互性能	流畅，页面加载后路由切换和数据更新在客户端完成，无需频繁请求服务器	初始快，后续交互需客户端 hydration 或依赖服务器响应，体验可能不如纯 CSR	CSR
服务器压力	小，仅提供静态文件和 API，CDN 可轻松分担负载	大，每次请求需渲染 HTML，高并发下对服务器性能要求高	CSR

示例

CSR 示例（React）

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

服务器返回：

<div id="root"></div>
<script src="/bundle.js"></script>

SSR 示例（Next.js）

function Home({ data }) {
  return <h1>{data.title}</h1>;
}

export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return { props: { data } };
}

export default Home;

适用场景

• CSR
  • 交互密集型应用（如管理后台、内部工具）。
  • 对 SEO 无要求，或通过预渲染解决。
  • 服务器资源有限。
• SSR
  • 内容驱动型网站（如电商、博客）。
  • 需快速首屏和 SEO。
  • 用户网络环境较差。