首先从概念上区分，服务器渲染（Server-side Rendering，简称 SSR）和客户端渲染（Client-side Rendering，简称 CSR）主要的区别在于页面的渲染地点不同：

1. 服务器渲染，即 SSR，是在服务器端将数据和模板进行组装，渲染成最终的HTML页面，然后返回给客户端的浏览器，实际上用户第一次打开页面时看到的就是最终渲染的结果。

2. 客户端渲染，即 CSR，初始时服务器返回一个基本的HTML框架和JavaScript文件，数据是通过AJAX或Fetch等技术请求获得的，然后在客户端进行页面的渲染。

他们各自有其优点和缺点：

• SSR 的优点主要体现在：

  1. SEO 友好。对于服务器渲染的页面，搜索引擎可以直接抓取到渲染后的页面，有利于搜索引擎优化。
  2. 首屏加载快。用户可以更快地看到首屏的内容，对于用户体验非常好。
   

  SSR 的缺点：

  1. 服务器压力大。因为渲染操作在服务器端进行，服务器需要处理大量的渲染操作，消耗的资源会比客户端渲染要大。
  2. 后续的操作可能需要额外的AJAX请求。

• CSR 的优点：

  1. 用户交互体验好。一旦页面加载完成，用户操作可以立即看到反馈，不用像SSR一样每次都需请求服务器。
  2. 服务器压力小。服务器只需要负责返回JSON数据，HTML渲染工作由客户端完成。
   

  CSR 的缺点：

  1. 不利于SEO。因为初始的HTML页面几乎没有内容，搜索引擎无法有效地分析页面信息。
  2. 首屏加载时间可能较长。受网络情况和设备性能的影响，客户端渲染页面的首屏渲染时间可能会较长。

        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 = `                     
Hello, World!
               `;   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 = `                     
                        `;   res.send(response); });  app.get('/script.js', (req, res) => {   const script = `     window.onload = function() {       document.getElementById('app').innerHTML = '
Hello, World!
';     };   `;   res.send(script); });  app.listen(3000, () => console.log('Server is running on port 3000'));