Vue-ssr 桃扇骨 2023-01-08 08:22 169阅读 0赞 spa是单页面应用程序 # 什么是ssr # * server side render ,简称服务端渲染，比起传统的web渲染技术 asp.net php jsp。 * 将一个 Vue组件在服务端渲染为HTML字符串并发送到浏览器，最后将这些静态标记“激活”为**可交互应用程序的过程**称为服务端渲染。 * 前后端分离之后，页面加载的流程是，前端异步请求拿到数据渲染页面。服务端渲染就是在后端把数据取好，拼好页面的DOM树发给前端，到浏览器解析渲染 # 为什么要用ssr，有什么优点，缺点 # ## 相比传统的web渲染 ## jsp，客户端发起请求，服务端进行查库，拼成html结构，然后再响应客户端。 asp，服务端进行查库，把html结构发送给客户端，客户端进行页面构建，这时候的html还没有数据，需要通过事件处理向服务器发起请求(Ajax请求)或者执行vuejs向服务端要数据，服务器再响应json回来。这样请求太多次，用户体验不好，会造成首屏渲染速度慢，对SEO不友好 ## 优点 ## * 页面的SEO, 异步拿数据显示对爬虫不友好 * 首屏渲染速度快，更好的用户体验 ## 缺点 ## * 开发条件受限，有些生命钩子不能用 * 构建部署要求多，只能用nodejs进行服务端渲染 * 服务端负载变大 # 通过Vue实现 # 利用vue将模板，解析html，查库等异步操作和组件，将首屏数据直接返回。因为客户端相关代码，是在首屏渲染以后，激活成asp，再发送ajax请求等 通过安装 * 官方提供一个插件 vue-server-renderer 可以直接将vue 实例渲染成 Dom 标记 * express搭建服务器 npm install vue-server-renderer express -D npm i vue-router -S ![架构][c812213dec26d9d0e9f8d0e684483405.png] * 不同于以往的路由配置是每次都要创建路由，因为每个请求应该都是全新的、独立的应用程序实例，以便不会有交叉请求造成的状态污染 （在纯客户端应用程序中，每个用户会在他们各自的浏览器中使用新的应用程序实例。） 未完待续............. ![可爱表情包｜太开心了惹\_侵权][86fdad41281852eda77fddf3b1b951e4.png] [c812213dec26d9d0e9f8d0e684483405.png]: /images/20221119/d028f9074fde4952bd896e38aaf5b800.png [86fdad41281852eda77fddf3b1b951e4.png]: /images/20221119/52150f69a0574268b8375f4a028c99d7.png
还没有评论，来说两句吧...