马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有账号？立即注册
x
起首从概念上区分，服务器渲染（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'));
|
