随着Web应用的发展，前端渲染技术也在不断演进。在过去，客户端渲染（Client-Side Rendering，CSR）是主流，但近年来服务器端渲染（Server-Side Rendering，SSR）也逐渐受到关注。本文将对SSR和CSR进行比较，分析它们的优势和劣势，并提供示例代码来说明它们的区别和应用场景。
什么是服务器端渲染（SSR）？
服务器端渲染是指在服务器端生成HTML，并将其发送到客户端，然后客户端直接显示已渲染的页面。在SSR中，浏览器只需接收和展示已经渲染好的HTML，JavaScript在浏览器端仅用于处理少量的交互和动态功能。
什么是客户端渲染（CSR）？
客户端渲染是指在浏览器端使用JavaScript生成HTML，并通过JavaScript动态地渲染页面内容。在CSR中，服务器通常只提供数据接口，而渲染逻辑由浏览器的JavaScript执行。
SSR与CSR的比较
首次加载性能：
- SSR：由于服务器端已经生成了HTML，因此首次加载速度较快。用户可以快速看到页面内容。
- CSR：浏览器首先加载HTML和JavaScript，然后再动态渲染页面内容，导致首次加载速度相对较慢。
SEO友好性：
- SSR：由于搜索引擎爬虫可以直接读取服务器端生成的HTML，因此SSR对SEO较为友好，有利于搜索引擎收录。
- CSR：搜索引擎爬虫执行JavaScript较差，可能无法获得完整的页面内容，对SEO不太友好。
开发复杂性：
- SSR：需要在服务器端进行HTML模板渲染，涉及到后端和前端的协作，对开发者的技能要求较高。
- CSR：前端开发者可以专注于JavaScript和交互逻辑，与后端解耦，降低了开发复杂性。
用户体验：
- SSR：在首次加载后，页面切换速度较快，用户体验较好。
- CSR：页面切换通常需要等待JavaScript加载和执行，可能导致页面闪烁或白屏，体验稍差。
服务器负载：
- SSR：服务器需要进行HTML渲染，每次请求都需要消耗一定的服务器计算资源。
- CSR：服务器只提供数据接口，不进行HTML渲染，可以减轻服务器负担。
SSR示例代码：
// 服务器端代码
const express = require('express');
const app = express();
app.get('/', (req, res) => {
const html = `
<html>
<head>
<title>SSR Example</title>
</head>
<body>
<h1>Hello, SSR!</h1>
<p>This is a server-side rendered page.</p>
</body>
</html>
`;
res.send(html);
});
app.listen(3000, () => {
console.log('Server is running on port 3000.');
});
CSR示例代码：
<!-- 客户端HTML代码 -->
<!DOCTYPE html>
<html>
<head>
<title>CSR Example</title>
</head>
<body>
<div id="app"></div>
<script src="app.js"></script>
</body>
</html>
// 客户端JavaScript代码（app.js）
document.addEventListener('DOMContentLoaded', () => {
const appElement = document.getElementById('app');
appElement.innerHTML = '<h1>Hello, CSR!</h1><p>This is a client-side rendered page.</p>';
});
SSR与CSR的应用场景选择：
- 选择SSR：对于需要SEO友好、首次加载性能和用户体验的页面，如博客、新闻、电子商务等静态内容的展示页面。
- 选择CSR：对于复杂的单页面应用（SPA），其中包含大量交互和动态内容，且不太关心SEO的网页应用。
结论
服务器端渲染（SSR）和客户端渲染（CSR）各有优势，适用于不同的场景。在选择渲染方式时，应根据项目需求、性能要求和开发团队技能进行权衡。在实际项目中，SSR和CSR也可以结合使用，充分发挥各自的优点，以提供更好的用户体验和性能。
![[Git] 深入理解 Git 的客户端与服务器角色](https://ucc.alicdn.com/mf7bdqcba64nc/developer-article1650288/20250122/5c93959780854f9180ee54fd63b232a2.png?x-oss-process=image/format,webp/resize,h_160,m_lfit)
