服务器渲染和客户端渲染：解析服务器渲染（SSR）和客户端渲染（CSR）的概念
起首从概念上区分，服务器渲染（Server-side Rendering，简称 SSR）和客户端渲染（Client-side Rendering，简称 CSR）主要的区别在于页面的渲染所在不同：[*] 服务器渲染，即 SSR，是在服务器端将数据和模板进行组装，渲染成最终的HTML页面，然后返回给客户端的欣赏器，实际上用户第一次打开页面时看到的就是最终渲染的结果。
[*] 客户端渲染，即 CSR，初始时服务器返回一个根本的HTML框架和JavaScript文件，数据是通过AJAX或Fetch等技能请求得到的，然后在客户端进行页面的渲染。
他们各自有其长处和缺点：
[*] SSR 的长处主要体现在：
[*]SEO 友好。对于服务器渲染的页面，搜刮引擎可以直接抓取到渲染后的页面，有利于搜刮引擎优化。
[*]首屏加载快。用户可以更快地看到首屏的内容，对于用户体验非常好。
SSR 的缺点：
[*]服务器压力大。由于渲染操纵在服务器端进行，服务器必要处置处罚大量的渲染操纵，消耗的资源会比客户端渲染要大。
[*]后续的操纵大概必要额外的AJAX请求。
[*] CSR 的长处：
[*]用户交互体验好。一旦页面加载完成，用户操纵可以立即看到反馈，不用像SSR一样每次都需请求服务器。
[*]服务器压力小。服务器只必要负责返回JSON数据，HTML渲染工作由客户端完成。
CSR 的缺点：
[*]倒霉于SEO。由于初始的HTML页面险些没有内容，搜刮引擎无法有效地分析页面信息。
[*]首屏加载时间大概较长。受网络情况和设备性能的影响，客户端渲染页面的首屏渲染时间大概会较长。
Next.js 和 Nuxt.js 等框架提供了一种称为同构渲染（Universal Rendering）或预渲染（Prerendering）的模式，这种模式结合了SSR和CSR两种渲染方式，分身了他们的长处。
Next.js 是React的服务端渲染框架，Nuxt.js 是Vue的服务端渲染框架。他们初次渲染在服务器端完成（SSR），可以或许使用户快速看到页面内容，有利于SEO。之后的页面交互和切换则在客户端完成（CSR），进步了页面相应速率和用户体验，减少了服务器压力。
1、服务器渲染（SSR）
在以下的服务器渲染的示例中，服务器会将数据 "Hello, World!" 嵌入到 HTML 中，并将其发送到客户端。
const express = require('express');
const app = express();
app.get('/', (req, res) => {
const response = `
<html>
<body>
<h1>Hello, World!</h1>
</body>
</html>
`;
res.send(response);
});
app.listen(3000, () => console.log('Server is running on port 3000'));
2、客户端渲染（CSR）
在以下的客户端渲染的示例中，实际上服务器仅仅发送了一个空缺的 HTML 页面和一个 JavaScript 文件。这个 JavaScript 文件会在客户端运行，获取数据，并更新 HTML。
服务器端代码：
const express = require('express');
const app = express();
app.get('/', (req, res) => {
const response = `
<html>
<body>
<div id="app"></div>
<script src="/script.js"></script>
</body>
</html>
`;
res.send(response);
});
app.get('/script.js', (req, res) => {
const script = `
window.onload = function() {
document.getElementById('app').innerHTML = '<h1>Hello, World!</h1>';
};
`;
res.send(script);
});
app.listen(3000, () => console.log('Server is running on port 3000'));
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]