浅谈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_注入到

Nuxt原理

前端路由沿用了history模式，通过history.pushState更改URL，进而局部渲染组件。

history router的实现思路是:监听页面中和路由有关的a标签点击事件，阻止默认的跳转行为，然后调用history.pushState方法，让浏览器记住路由，然后手动更新相应视图。同时为了监听用户手点浏览器的前进后退按钮，还需要监听popstate事件，动态的修改相应视图。

Nuxt自录结构

Nuxt流程

1、当用户访问应用程序,如果store中定义了nuxtServerlnit action,Nuxt.js将调用它更新store。

2将加载即将访问页面所依赖的任何中间件。Nuxt首先从nuxt.config.js这个文件中，加载全局依赖的中间件,之后检测每个相应页面对应的布局文件，最后，检测布局文件下子组件依赖的中间件。以上是中间件的加载划项序。

3、如果要访问的路由是一个动态路由,且有一个相应的validate)方法路由的validate方法,讲进行路由校验。

4、Nuxt.js调用asyncData)和fetch()方法，在渲染页面之前加载异步数据。asyncData0方法用于异步获取数据，并将fetch回来的数据，在服务

端渲染到页面。用fetch0方法取回的将数据在渲染页面之前填入store。最后一步,将所有数据渲染到页面。

异步数据

Nuxt.js扩展了Vue.js,增加了一个叫asyneData的方法，使得我们可以在设置组件的数据之前能异步获取或处理数据。

asyncData方法会在组件（限于页面组待）每次加载之前被调用。

它可以在服务端或路由更新之前被调用。

在这个方法被调用的时候，第一个参数被设定为当前页面的上下文对象。你可以利用asyncData方法来获取数据，Nuxt.js会将asyncData返回的数据融合组件data方法返回数据一并返回给当前组件。