CSR 与 SSR 渲染模式

理解客户端渲染和服务端渲染的区别与应用场景

问题

CSR 和 SSR 分别是什么？它们有什么区别？

解答

CSR（客户端渲染）

以 React 为例，浏览器加载 JavaScript 文件后，由 React 代码生成页面并完成交互事件绑定，整个渲染过程在客户端完成。

// 典型的 CSR 流程
import React from 'react';
import ReactDOM from 'react-dom';

function App() {
  return <div>Hello World</div>;
}

// 在客户端渲染
ReactDOM.render(<App />, document.getElementById('root'));

缺点：如果 JavaScript 文件较大，加载时间长，会导致首屏白屏。

SSR（服务端渲染）

服务端直接生成完整的 HTML 内容返回给浏览器，浏览器可以立即渲染首屏内容。

// Node.js 服务端渲染示例
import express from 'express';
import React from 'react';
import { renderToString } from 'react-dom/server';

const app = express();

app.get('/', (req, res) => {
  const html = renderToString(<App />);
  res.send(`
    <!DOCTYPE html>
    <html>
      <body>
        <div id="root">${html}</div>
      </body>
    </html>
  `);
});

缺点：服务端渲染的页面交互能力有限，需要 JavaScript 加载后才能实现复杂交互。

同构渲染

将页面展示和交互逻辑写在一起，代码执行两次：服务端执行一次生成 HTML，客户端执行一次绑定交互事件。

// 同构应用示例
function App() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

// 服务端：renderToString(App) 生成 HTML
// 客户端：hydrate(App) 绑定交互

核心区别

CSR 和 SSR 的本质区别在于最终的 HTML 代码是由客户端生成还是服务端生成。

关键点

CSR 在客户端生成 HTML，首屏加载慢但交互灵活
SSR 在服务端生成 HTML，首屏加载快但服务器压力大
同构渲染结合两者优势，服务端渲染首屏，客户端接管交互
选择渲染模式需要权衡首屏性能、SEO 需求和服务器成本