浅谈vue服务器端渲染

SSR是什么？什么要用SSR

SSR是 Server-Side Rendering(服务器端渲染）的缩写，简单的理解就是将原本在浏览器上渲染编译的组件、页面，现在通过服务器编译html字符串，发送到浏览器，最后将静态标记，混合为客户端上交互的应用程序。

（1）解决SEO的问题

当百度搜索引擎爬虫爬取的时候，通过URL产生对服务器的请求，服务器根据URL，相应页面，因此百度就获取到了我们的站点的数据。

（2）一定程度解决了SPA程序首屏白屏的问题。在首屏刷新的时候，通过后端计算并模版渲染，再将html相应给客户端，省去了浏览器端首次渲染的时间。（当然在服务端渲染增加了服务端的压力）

SSR

SSR框架

（1）Angular SSR框架 Angular Universal

（2）ReactSSR框架Next.js

（3）Vue SSR框架nuxt.js

Vue SSR原理

原理：相当于服务端前面加了一层url分配，可以假想为服务端的中间层，当地址栏url改变或者直接刷新，其实直接从服务器返回内容，是一个包含内容部分的html模板，是服务端渲染而在交互过程中则是ajax处理操作，局部刷新，首先是在history模式下，通过history. pushState方式进而url改变，然后请求后台数据服务，拿到真正的数据，做到局部刷新，这时候接收的是数据而不是模板。

 基于Vue进行SSR改造

1、拆分js入口，前端和后端入口（entry-clientjs、entry-server.js)

• entry-client.js在浏览器端执行，所以需要指定el并且显式调用$mount方法，以启动浏览器的渲染。

• entry-server.js在服务端被调用，因此需要导出为一个函数。

2、拆分Webpack打包配置

• webpack打包vue.config.js

• 安装cross-env

• npmicross-6

• npmilodash.merge--save-dev

• ckage.j

• " build : client " : " vue-cli-service build "

• "build:server":"cross-env WEBPACK_TARGET=node vue-cli-service build"

3、编写服务端渲染主体逻辑

    Vue SSR依赖于包vue-server-render,它的调用支持两种入口格式：createRenderer和createBundleRenderer,前者以Vue组件为入口，后者以打包后的JS文件为入口。

服务端数据初始化

1、在vue渲染前，预先获取所有的数据，存储到vuex的store中

2、后端渲染时，通过vuex将获取的数据注入到相应的组件中

3、把store中的数据设置到 window._INITIAL_STATE_属性中

4.在浏览器环境中，通过Vuex将window._INITIAL_STATE_注入到