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

bsr：浏览器渲染

ssr：服务端渲染。更好的seo（特别是有些信息平台类的站点，更需要被搜索引擎优先搜到）；更好的内容获取速度（少了页面首屏多次ajax请求动态拉取数据并渲染的时间）

vue框架：nuxt

路由 ：

不需要配置路由，pages目录下的vue文件就代表一级路由标签即可，然后在跟组件上加入<nuxt/>，类似于单页面的<router-view/>

声明式导航 ：

使用<nuxt-link/>，类似于单页面的<router-link/>

嵌套路由 ：

父路由组件上面用<nuxt-child/>,也是个组件容器，然后创建父组件同名目录，内部放子组件。

重定向 ：

配置nuxt.config.js

或者编写中间件

视图 ：

本质还是组件

组件默认加载的是layout目录下的default.vue文件,可以在路由组件上配置layout属性，指向指定的layout组件文件名

动态获取数据 ：

ssr和bsr的获取数据时机是不一样的。ssr会在vue解析模板之前就把数据准备好，一次渲染完成；而bsr一般是mounted回调再调ajax去拉取数据，然后重新渲染组件。

nuxt为vue组件提供了asyncData配置项，用来拉取数据。

反向代理

用户请求页面的时候请求会在后端完成，然后返回最终模板；如果是用户路由跳转，没有触发浏览器默认的xhr请求，请求是在浏览器（客户端）发送的。

由此会引发另一个问题：浏览器上请求会出现跨域问题。

因此需要服务端配置好反向代理：

npm -i @nuxtjs/axios -D // 这个应该不用手动装，脚手架应该装好了

npm -i @nuxtjs/proxy -D

在nuxtjs.config.js中添加axios和proxy模块，并配置反向代理

还有一点要注意的是，组件内axios请求的地址配置要调整：

process.server是一个全局变量，用来标识当前环境是不是服务端

第三方组件库（element ui为例）

配置nuxt.config.js

---