vue项目改造SSR（服务端渲染）

缺点：1、SEO问题

2、首屏速度问题

3、消耗性能的问题

优点：

1、更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面

2、首屏渲染速度快

SSR 简单来说就是将页面在服务端渲染完成后在客户端直接展示。

index.template.html

server.js

vue项目是通过虚拟 DOM来挂载到html的，所以对spa项目，爬虫才会只看到初始结构。虚拟 DOM，最终要通过一定的方法将其转换为真实 DOM。虚拟 DOM 也就是 JS 对象，整个服务端的渲染流程就是通过虚拟 DOM 的编译成完整的html来完成的。

需要通过Webpack打包生成两份bundle文件：

Client Bundle，给浏览器用。和纯Vue前端项目Bundle类似

Server Bundle，供服务端SSR使用，一个json文件

不管项目先前是什么样子，是否是使用vue-cli生成的。都会有这个构建改造过程。在构建改造这里会用到 vue-server-renderer 库，这里要注意的是 vue-server-renderer 版本要与Vue版本一样。

打包之后目录结构

vue.config.js

index.template.html

打包成客户端和服务器端

启动node服务

github地址： https://github.com/wang12321/SSR

我们从最简单的new Vue开始：

1、new Vue，执行初始化

2、挂载$mount方法，通过自定义Render方法、template、el等生成Render函数

3、通过Watcher监听数据的变化

4、当数据发生变化时，Render函数执行生成VNode对象

5、通过patch方法，对比新旧VNode对象，通过DOM Diff算法，添加、修改、删除真正的DOM元素

至此，整个new Vue的渲染过程完毕。

1、把模板编译为render函数

2、实例进行挂载, 根据根节点render函数的调用，递归的生成虚拟dom

3、对比虚拟dom，渲染到真实dom

4、组件内部data发生变化，组件和子组件引用data作为props重新调用render函数，生成虚拟dom, 返回到步骤3

详见链接： https://segmentfault.com/a/1190000018495383

从官方给出的渲染方案能看出，后端只是在页面硬塞了数据及数据状态进去，就效果而论渲染的工作还是前端负责，所以其他后端也能做到。具体看例子写script标签到页面那段.

vue的服务端渲染，目前发现下面两个包可以实现nodejs向其他服务器请求数据。我现在用的是axios，因为我看到axios同时支持nodejs和浏览器。

---