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 需求和服务器成本
目录