Vue-ssr

 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 

 

• 不同于以往的路由配置是每次都要创建路由，因为每个请求应该都是全新的、独立的应用程序实例，以便不会有交叉请求造成的状态污染 （在纯客户端应用程序中，每个用户会在他们各自的浏览器中使用新的应用程序实例。）

 

未完待续.............