乐趣区

关于vue.js:理解Vue-SSR原理搭建项目框架

jiezi

一、为什么应用 SSR？

在传统 vue 单页面利用中，页面的渲染都是由 js 实现，如下图所示，在服务端返回的 html 文件中，body中只有一个 div 标签和一个 script 标签，页面其余的 dom 构造都将由 bundle.js 生成，而后挂载到 <div id="app"></div> 上。这让搜索引擎爬虫抓取工具无奈爬取页面的内容，如果 SEO 对你的站点很重要，则你可能须要服务器端渲染 (SSR) 解决此问题。


除了 SEO，应用 SSR 还能放慢首屏的出现速度，因为服务端间接返回渲染好的页面 html，不须要 js 就能看到残缺渲染的页面。比起单页利用通常比拟大的 js 文件，这部分代码量很小，所以首屏的达到工夫会更快，白屏的工夫更短。

当然，SSR 的应用也有一些局限性，首先，开发条件受限，在服务端渲染中，created 和 beforeCreate 之外的生命周期钩子不可用。其次，更多的服务器端负载，在服务端中渲染残缺的应用程序，显然会比仅仅提供动态文件的服务器更加占用 CPU 资源。此外，SSR 在部署方面有更多要求。与能够部署在任何动态文件服务器上的齐全动态单页面应用程序（SPA）不同，服务器渲染应用程序，须要处于 Node.js 的运行环境。所以波及到 SSR 技术选型的时候，要综合思考它的优缺点，看看是否有必要应用。

二、根底性能实现

SSR 的实质就服务端返回渲染好的 html 文档。咱们先在我的项目根目录启动一个服务器，而后返回一个 html 文档。这里咱们应用 koa 作为服务端框架。

//server.js
const Koa = require('koa')
const router = require('koa-router')()

const koa = new Koa()
koa.use(router.routes())

router.get('/',(ctx)=>{
  ctx.body = `<!DOCTYPE html>      // 要返回给客户端的 html
  <html lang="en">
    <head><title>Vue SSR</title></head>
    <body>
      <div>This is a server render page</div>
    </body>
  </html>`
})

koa.listen(9000, () => {console.log('server is listening in 9000');
})

在命令行启动服务器: node server.js，而后在浏览器拜访http://localhost:9000/，服务端回返回的内容如下，浏览会依据这段 html，渲染出页面。

vue-server-renderer

当然，要返回的 html 字符串能够是由 vue 模板生成的，这就须要用到 vue-server-renderer，它会 基于 Vue 实例生成 html 字符串 ，是 Vue SSR 的外围。在下面的server.js 中稍作批改：

const Koa = require('koa')
const router = require('koa-router')()

const koa = new Koa()
koa.use(router.routes())

const Vue = require('Vue')     // 导入 Vue，用于创立 Vue 实例
const renderer = require('vue-server-renderer').createRenderer()  // 创立一个 renderer 实例
const app = new Vue({          // 创立 Vue 实例
  template: `<div>{{msg}}</div>`,
  data(){
    return {msg: 'This is renderred by vue-server-renderer'}
  }
})

router.get('/',(ctx)=>{
  // 调用 renderer 实例的 renderToString 办法，将 Vue 实例渲染成字符串
  // 该办法承受两个参数，第一个是 Vue 实例，第二个是一个回调函数，在渲染实现后执行
  renderer.renderToString(app, (err, html) => {   // 渲染失去的字符串作为回调函数的第二个参数传入
    ctx.body = `<!DOCTYPE html>
    <html lang="en">
      <head><title>Vue SSR</title></head>
      <body>
        ${html}    // 将渲染失去的字符串拼接到要返回的后果中
      </body>
    </html>`
  })
})

koa.listen(9000, () => {console.log('server is listening in 9000');
})

重启服务器，再拜访：

这样，咱们就实现了一个极其根底的 Vue SSR。然而不太具备实操性，咱们在理论我的项目开发时，是不可能这样写的，咱们会模块化地搭建我的项目，而后通过打包工具打包成一个或多个 js 文件。

正式一点的应用

搭建一个模块化的 vue 我的项目

咱们模块化地搭建一个简略地 vue 我的项目，用 vue-router 治理路由。

// 打包入口文件 src/main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})
//  src/App.vue
<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>
<style lang="less">
#app{
  margin: 0 auto;
  width: 700px;
  #nav{
    margin-bottom: 20px;
    text-align: center;
  }
}
</style>
//  src/router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

export default new VueRouter({
  mode: 'history',
  routes
})
// src/views/Home.vue
<template>
  <div class="home">
    <h1>This is home page</h1>
  </div>
</template>
// src/views/About.vue
<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>

以 src/main.js 作为打包入口文件，依照客户端单页面的形式打包，而后在浏览器关上，渲染后果如下：

将我的项目革新成服务端渲染

咱们接下来就把下面这个 demo 革新成服务端渲染。

次要的革新点：服务端渲染须要 Vue 实例，每一次客户端申请页面，服务端渲染都是用一个新的 Vue 实例，不同的用户不能拜访同一个 Vue 实例。所以服务端须要一个生成 Vue 实例的工厂函数，每次渲染由这个工厂函数生成 Vue 实例。

新建一个专门用于服务端渲染的入口文件entry.server.js:

import {createApp} from './main'

export default context => {  // 生成 Vue 实例的工厂函数，return new Promise((resolve, reject) => {const app = createApp()
    const router = app.$router

    const {url} = context    //context 蕴含服务端须要传递给 Vue 实例的一些数据，比方这里的路由
    const {fullPath} = router.resolve(url).route

    if(fullPath !== url){  // 判断以后路由在 Vue 实例中是否存在
      return reject({url: fullPath})
    }

    router.push(url)      // 设置 Vue 实例的以后路由

    router.onReady(() => {const matchedComponents = router.getMatchedComponents()  // 判断以后路由是否有对应组件
      if(!matchedComponents.length){
        return reject({code: 404})
      }
      resolve(app)    // 返回 Vue 实例
    }, reject)
  })
}

将 src/main.js 革新成如下：

import Vue from 'vue'
import App from './App.vue'
import {createRouter} from './router'

Vue.config.productionTip = false

export function createApp(){const router = createRouter()
  const app = new Vue({
    router,
    render: h => h(App)
  })
  return app
}

基于 entry.server.js 打包的 webpack 配置，也要作一些批改：

target: 'node',
entry: './src/entry.server.js',
output: {path: path.join(__dirname, '../dist'),
  filename: 'bundle.server.js',
  libraryTarget: 'commonjs2'
},

而后，在服务端，咱们就能够通过打包后的 bundle.server.js 进行服务端渲染了。

//server.js 作如下扭转：const renderer = require('vue-server-renderer').createRenderer({   // 基于模板创立一个 renderer 实例
  template: require('fs').readFileSync('./index.template.html', 'utf-8')
})
const app = require('./dist/bundle.server.js').default    // 导入 Vue 实例工厂函数
router.get('/(.*)', async (ctx, next) => {
  const context = {                   // 获取路由，用于传递给 Vue 实例
    url: ctx.url
  }
  let htmlStr
  await app(context).then( res => {    // 生成 Vue 实例，并传递给 renderer 实例生成字符串
    renderer.renderToString(res, context, (err,html)=>{if(!err){htmlStr = html}
    })
  })
  ctx.body = htmlStr
});


能够看到，这里咱们曾经实现了服务端的渲染，页面 dom 构造呈现在了由服务器返回的 html 文档中。

客户端激活

咱们曾经窥见了一点在理论我的项目应用 SSR 的曙光，然而这只是第一步。当初每次点击 Home/About 都会从服务端申请 html 资源，单页面的前端路由劣势并没有施展。接下来咱们将加上一步客户端激活，让网页利用同时具备单页面的劣势。这也是 Vue SSR 的官网流程。

所谓客户端激活，指的是 Vue 在浏览器端接管由服务端发送的动态 HTML，使其变为由 Vue 治理的动静 DOM 的过程。 激活原理参考官网。

操作起来很简略，就是在返回的 html 页面中，加上 client bundle，用于在客户端治理以后 html。上面咱们来打包生成它。

新建一个entry.client.js：

import {createApp} from './main'

const app = createApp()
const router = app.$router

router.onReady(() => {app.$mount('#app')      // 服务端渲染默认会生成一个 id 为 app 的 div
})

打包的 webpack 配置：

entry: './src/entry.client.js',
output: {path: path.join(__dirname, '../dist'),
  filename: 'bundle.client.js'
},

打包实现后，就是把 bundle.client.js 加到 html 中，之前咱们是基于模板渲染:

const renderer = require('vue-server-renderer').createRenderer({   // 基于模板创立一个 renderer 实例
  template: require('fs').readFileSync('./index.template.html', 'utf-8')
})

所以只须要把 bundle.client.js 加到 index.template.html 就能够了。

//index.template.html
<!DOCTYPE html>
<html lang="en">
  <head><title>Vue SSR</title></head>
  <body>
    <!--vue-ssr-outlet-->
  </body>
  <script src="bundle.client.js"></script>
</html>

重启服务，再拜访，就能够看到，点击 Home/About 切换路由时，不会再从服务器申请 html 文档了。

三、申请数据

在理论我的项目中，页面往往是由从接口申请的数据填充渲染进去的，上面咱们将用申请的数据来渲染页面。为了不便（省事），就不另外写数据接口了，咱们去申请豆瓣的电影排行前 20 的数据。

具体思路，就是如果一个组件须要申请数据，当它是服务端渲染时，咱们在服务端申请数据，当客户端以 SPA 的路由切换形式应用该组件时，也能在客户端发送 ajax 申请数据。

咱们将借助 vuex 来实现。 因为它将数据挂载在 vue 实例上，传递拜访数据真的很不便。

在服务器端申请数据

回顾咱们客户端渲染惯例的申请数据的场景，在 created 或 mounted 钩子函数中发送 ajax 申请，申请胜利后把返回数据写到实例的 data 中。SSR 的申请数据不能这样，因为 ajax 申请是异步申请，申请收回去之后，数据还没返回，后端就曾经渲染完了，ajax 申请的数据无奈填充到页面中。

所以咱们间接由服务端发送申请获取数据，也就是一个服务器向另一个服务器发送 http 申请，和客户端向服务器发送申请不同，这里咱们应用 axios，这两种它都反对。

对于每个须要申请数据的组件，咱们将在组件上暴露出一个自定义静态方法 asyncData，因为此函数会在组件实例化之前调用，所以它无法访问 this。须要将 store 和路由信息作为参数传递进去。

//Home.vue
<template>
  <div class="movie-list">
    <div v-for="(item, index) in list" class="movie">
      <img class="cover" :src="item.cover">
      <p>
        <span class="title">{{item.title}}</span>
        <span class="rate">{{item.rate}}</span>
      </p>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'MovieList',
    asyncData ({store,route}) {    // 自定义静态方法 asyncData
      return store.dispatch('getTopList')     
    },
    
    /*****
    在这里，执行 asyncData，就会调用 getTopList 办法去申请数据
    并将数据更新到 vue 实例的 $store.state 中
    actions: {getTopList (store) {return top20().then((res) => {store.commit('setTopList', res.data.subjects)
        })
      }
    }
    *****/
    
    computed: {list () {return this.$store.state.topList}
    },
    created () {if(!this.$store.state.topList){this.$store.dispatch('getTopList')
      }
    }
  }
</script>

在 entry.server.js 中，咱们通过路由取得了与 router.getMatchedComponents() 相匹配的组件，如果组件暴露出 asyncData，就调用这个办法。而后咱们须要将解析实现的状态，附加到渲染上下文 (render context) 中。

import {createApp} from './main'

export default context => {return new Promise((resolve, reject) => {const app = createApp()
    const router = app.$router
    const store = app.$store
    ...
    router.onReady(() => {const matchedComponents = router.getMatchedComponents()
      if(!matchedComponents.length){
        return reject({code: 404})
      }
      Promise.all(matchedComponents.map(Component => {if (Component.asyncData) {
          // 如果组件暴露出 asyncData，就调用这个办法
          // 在本例中，就会去申请豆瓣数据，并把数据更新到 app.$store.state
          return Component.asyncData({  
            store,
            route: router.currentRoute
          })
        }
      })).then(() => {
        context.state = store.state  // 将 app.$store.state 赋值给渲染上下文 context.state，前面同步数据到客户端的时候会用到。resolve(app)
      }).catch(reject)
    }, reject)
  })
  })
}

当在数据更新到 app.$store.state 后，服务端渲染的 html 中就有数据了。可是页面是空白的，并且发送了 ajax 申请。起因是当客户端激活其实通过了二次渲染，也就是当 bundle.client.js 加载并执行后，页面由 bundle.client.js 再次渲染，通常来说，渲染后果会跟之前一样，所以觉察不到。

防止客户端反复申请数据

这里是跨域，所以 ajax 申请没有胜利。如果不是跨域，页面也能呈现内容的，是由客户端发送 ajax 取得的数据渲染而得。但在服务端曾经申请的数据，在客户端应该防止反复申请，怎么同步数据到客户端？

当应用 template 时，context.state 将作为 window.__INITIAL_STATE__ 状态，主动嵌入到最终的 HTML 中。而在客户端激活时，在挂载到应用程序之前，客户端的 vm.$store 就应该获取到window.__INITIAL_STATE__ 状态。

1. 在 server.js 中，为 renderer.renderToString 办法增加第二个参数context，context.state 将作为 window.__INITIAL_STATE__ 状态，主动嵌入到最终的 HTML 中。

router.get('/(.*)', async (ctx, next) => {
  const context = {url: ctx.url}
  let htmlStr
  await app(context).then( res => {renderer.renderToString(res, context, (err,html)=>{  // 增加第二个参数 context
      if(!err){htmlStr = html}
    })
  })
  ctx.body = htmlStr
});

  1. 批改entry.client.js：

    import {createApp} from './main'

const app = createApp()
const router = app.$router
const store = app.$store

if (window.__INITIAL_STATE__) {   // 如果 window.__INITIAL_STATE__有内容，就存到 app.$store 中
  store.replaceState(window.__INITIAL_STATE__)
}

router.onReady(() => {app.$mount('#app')
})

    这样就防止了客户端反复申请数据，最终成果如下，能够看到客户端没有发送 ajax 申请了。

这个我的项目搭建很繁难，次要是整顿一下 Vue SSR 的原理、流程，理论开发能够抉择 nuxt.js 这种比拟成熟的框架。

我的项目地址： https://github.com/alasolala/…

参考资料

解密 Vue SSR

手把手教你搭建 SSR(vue/vue-cli + express)

Vue SSR Guide

退出移动版