服务端渲染

SSR简单来说就是页面上的内容是通过服务端渲染生成的，浏览器直接显示服务端返回的html就可以了。相比之前常用的SPA来说有很多的优点，如下图，但也有一些实际存在的问题，在实际应用中需要多方面权衡利弊。

SSR优势

SSR缺点

1.开发条件所限：浏览器特定的代码，只能在某些生命周期钩子函数 (lifecycle hook) 中使用；一些外部扩展库 (external library) 可能需要特殊处理，才能在服务器渲染应用程序中运行。无疑增加了项目的复杂性
2.涉及构建设置和部署的更多要求：与可以部署在任何静态文件服务器上的完全静态单页面应用程序 (SPA) 不同，服务器渲染应用程序，需要处于 Node.js server 运行环境
3.更多的服务器端负载：在 Node.js 中渲染完整的应用程序，显然会比仅仅提供静态文件的 server 更加大量占用 CPU 资源 (CPU-intensive - CPU 密集)，因此如果你预料在高流量环境 (high traffic) 下使用，请准备相应的服务器负载，采用缓存策略等优化方案

解决方案

1. 优化服务器性能： 提升服务器的性能可以缓解服务器端压力增加的问题，可以采取增加服务器资源、使用负载均衡等方式来提高服务器的处理能力。
2. 异步数据加载： 采用异步数据加载的方式可以减少页面首次加载时间，提高用户体验。可以在服务器端渲染页面的同时，异步加载页面所需的数据，减少页面渲染时间。
3. 客户端缓存： 使用客户端缓存技术，如浏览器缓存、CDN缓存等，可以减少对服务器的请求次数，提高页面加载速度。
4. 使用CDN加速： 使用CDN（内容分发网络）可以将静态资源分发到全球各地的节点，减少用户请求时的网络延迟，提高页面加载速度。
5. 服务端渲染缓存： 在SSR中，可以使用服务端缓存技术，如页面片段缓存、页面级缓存等，提高页面渲染的速度和效率，减少对服务器的负载。
6. 增强用户体验： 在页面加载过程中可以采取一些技术手段，如骨架屏、逐步加载等，提高用户在等待页面加载时的体验。

合理使用CSR和SSR： 对于交互密集型的应用，可以采用CSR的方式来渲染页面，对于需要SEO友好或首屏加载速度要求高的页面，可以采用SSR的方式来渲染页面，合理选择使用CSR和SSR可以最大程度地发挥它们各自的优势。

实现过程

1. 配置服务器环境：需要在服务器端搭建Node.js环境，并安装相关依赖模块。可以使用Express或Koa等Web框架来简化开发。
2. 创建服务器入口：创建一个服务器入口文件，通过监听HTTP请求并返回相应的HTML文本来实现SSR。可以在入口文件中使用渲染引擎（如EJS、Pug等）来处理HTML模板，并将数据传递给模板进行渲染。
3. 配置路由：在服务器端配置路由，根据不同的请求路径返回相应的HTML文本。可以通过路由参数、查询字符串或POST请求等方式传递数据给服务器端进行处理。
4. 客户端脚本：在HTML文本中插入客户端脚本，用于处理后续的页面交互和异步请求。
5. SEO优化：为了优化SEO效果，需要在HTML文本中添加关键字、描述和标题等元数据，并且确保页面内容能够正常被搜索引擎抓取和解析。

注水脱水

• 【出现问题】ssr和客户端都配置了vuex，但区别是服务端的store里面放着List.vue需要的远程请求的数据，而客户端的store是空的。这样就会造成一个问题.页面本来很好的在浏览器展现，突然闪烁一下，List.vue页面模板的城市列表的数据消失了。
• 【分析原因】srr返回的静态html是带着城市列表的，一旦客户端的vue接管了整个应用就会展开各种各样的初始化操作，客户端也要配置vuex，由于它的数据仓库是空的所以重新引发了页面渲染，致使原本来含有城市列表的页面部分消失了。
• 【解决方法】想办法让ssr远程请求来的数据也给客户端的store发一份，这样客户端即使接管了应用，但发现此时store存储的城市列表数据和页面保持一致也不会造成闪烁问题。
  服务端渲染只发生在第一次进入页面的时候，再跳转的时候不是服务器端跳转，而是 JS 控制跳转（react 代码接管）

在 SSR 中，"注水"和"脱水"是两个与数据管理相关的概念：

• 注水（Hydration）： 在 SSR 中，当服务端生成完整的 HTML 页面并将其发送给客户端后，客户端需要重新构建页面并将其变为可交互的状态。注水就是在客户端接管页面后，将页面中已经存在的静态 HTML 结构"注水"成可交互的动态组件，使其具有交互能力。这样可以减少客户端重新渲染整个页面的成本，提高页面加载速度和性能。
  【服务端请求数据后，将数据传递给客户端】
• 脱水（Dehydration）： 相反，"脱水"是指在客户端进行页面交互之后，将页面状态恢复为静态 HTML 结构的过程。当用户在客户端进行交互操作时，页面的状态可能会发生变化，为了保持页面的一致性和可访问性，需要将页面状态从动态组件"脱水"成静态 HTML 结构，并将其发送给服务器以便下次SSR时使用。这样可以确保页面的状态在不同客户端之间的一致性。
  【客户端使用数据的过程】

注水和脱水是 SSR 中常用的技术手段，用于在客户端和服务器端之间保持页面状态的同步，以提高页面的交互性和性能。

vue+ssr搭建一个项目

图的左边是应用的源代码（source）、中间是webpack、右边是服务端（node server）。

• 安装vue和vue-server-renderer包，vue-server-renderer是将 vue 组件变为字符串，并且通过模板引擎将数据注入到字符串中，最后返回一个完整的 html 页面

const Vue = require('vue')
// 加载的时候可以将createRenderer方法加载并执行，这样就可以得到一个渲染器，可以用来渲染vue实例
const renderer = require('vue-server-renderer').createRenderer()
​
const app = new Vue({
  template: `
    <div id="app">
        <h1>{{ message }}</h1>
    </div>
  `,
  data: {
    message: 'hello world'
  }
})
​
// renderToString方法第一个参数是vue实例，第二个是回调函数，里面可以接收到错误对象以及html模板
renderer.renderToString(app, (err, html) => {
  if (err) throw err
  console.log(html)
})

• 使用node搭建服务器，配置后端路由
• 构建配置，对于server entry来说，最终要通过webpack打包成一个server bundle，其作用主要是来做服务端渲染；对于client entry来说，它最终要打包成client bundle，它的作用是来接管服务端渲染生成的页面并激活成动态的客户端页面
  所以需要两个入口
  一个是服务端的入口，另一个是客户端的入口
  
• 构建webpack打包工具，打包两套代码