这里是详细讲解“vue ssr 实现方式(学习笔记)”的完整攻略。

背景

前端框架的出现，让前端的工程师能够愉快的写代码，但是一个问题却在诞生：SEO。如果你的网站有 SEO 的要求，即搜索引擎优化，单纯的用前端框架写代码是无法满足这个需求的。那么怎么解决这个问题呢？这里我们就提到了 ssr。

什么是 SSR

SSR，即“服务端渲染”，是指将数据通过服务端获取后，经过模板引擎渲染后一并返回给客户端的技术。SSR 能够解决以前纯前端 SPA 所遇到的 SEO（搜索引擎优化）、首屏加载时间、前后端代码共用等问题。

Vue SSR 的实现方式

Vue SSR 的实现方式主要分为以下几个步骤：

服务端入口
构建客户端应用程序
渲染器生成
渲染

下面我们就来一一详细的讲解每个步骤。

服务端入口

第一步，我们需要创建服务器入口文件 server-entry.js。该文件会被用来创建服务器实例。

客户端激活

服务端渲染出来的 HTML 是不具有交互性的，这是和前端渲染的一个差异。如果只进行服务端渲染，那么用户的体验是非常糟糕的。所以我们需要将服务端渲染出来的 HTML 和客户端的 JavaScript 进行激活。

客户端激活有两种方式，一种是采用官方推荐的方式，即使用client-entry.js文件；而另一种方式是将客户端 JavaScript 直接插入渲染出来的 HTML 中。

下面结合实例进行详细说明。

客户端激活方式一：client-entry.js

创建客户端 app 入口文件 client-entry.js

import createApp from './app'
const {app} = createApp()
app.$mount('#app')

在服务器渲染函数中异步获取客户端激活文件后，返回的html中插入如下内容

<script src="/dist/client-entry.js"></script>

注意：render渲染函数中返回html的时候一定要将script嵌套在div内，否则会造成一定的阻塞。

客户端激活方案二：将客户端 JavaScript 直接插入 HTML 中

当然，我们还可以使用 vue-router 中提供的 history 模式，以导航的方式切换路由，不会造成页面的刷新，就不会有白屏的瞬间出现。

构建客户端应用程序

在服务端入口中，我们使用了Vue的工厂方法 createApp，这个方法将返回两个对象，分别为：应用实例 app 和 router。app 表示带有所有渲染结果的 vue 实例，而 router 是 vue-router 的实例。

// app.js
Vue.use(VueRouter)
export default function createApp () {
  const router = new VueRouter({
    mode: 'history',
    routes
  })

  const app = new Vue({
    router,
    render: h => h(App)
  })

  return { app, router }
}

而为了生成客户端应用程序，我们还需要一个工厂方法来生成客户端 app。

// entry-client.js
import createApp from './app'

const { app } = createApp()

// 此时就可以挂载到页面上了。
// $mount() 如果没有参数，将会挂载到 body 下，相当于 app.$mount('body')
app.$mount('#app')

渲染器生成

在第三步进行服务端渲染时，我们需要生成一个渲染器。而 Vue 提供了两种方式生成渲染器。

webpack 打包成 bundle 的方式

在 webpack 打包过程中，Vue 提供了一个官方插件 vue-server-renderer/server-plugin，通过这个插件，我们会将 server-entry.js 和 entry-client.js 一同打包成一个 bundle，然后打包生成的 bundle 和 index.html 在服务端启动时一起被服务端加载。

// webpack.config.js (server)
const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')
module.exports = {
  target: 'node',
  devtool: 'source-map',
  entry: './app.js',
  output: {
    filename: 'server-bundle.js',
    libraryTarget: 'commonjs2'
  },
  plugins: [
    new VueSSRServerPlugin()
  ]
}

接口路由方式

这种方式的实现就和普通的 API 接口一样，直接返回渲染好的 HTML 字符串。服务器接收到 URL 后，定义一个路由规则，从而可以向请求端返回正确的 HTML 渲染结果。

渲染

在第四步中，我们需要通过生成的渲染器将代码渲染出来。

服务端渲染

在服务端渲染时，我们需要使用到 vue-server-renderer 模块提供的 createRenderer 函数来创建一个 renderer 实例。该函数接收一个 Object 类型的配置作为参数。以下是一个基本的渲染函数的结构：

const renderer = require('vue-server-renderer').createRenderer({
  template: require('fs').readFileSync('./index.template.html', 'utf-8')
})

const context = {
  title: 'vue ssr',
  meta: `
    <meta name="keyword" content="vue,ssr">
    <meta name="author" content="胡志明">
  `
}

server.get('*', (req, res) => {
  const app = new Vue({
    data: {
      message: 'Vue SSR'
    },
    template: '<div>{{message}}</div>'
  })

  renderer.renderToString(app, context, function(err, html) {
    if (err) {
      console.error(err)
      res.status(500).end('Internal Server Error')
      return
    }
    res.end(html)
  })
})

客户端渲染

在客户端渲染时，我们通常只需要使用 new Vue() 这个工厂方法即可，和普通的客户端渲染一样，不需要使用到 vue-server-renderer 模块。通常情况下，我们在 <body> 标签上手动加上 id “app”，这也是 Vue SSR 官方提供的标准写法。

<body>
  <div id="app"></div>
  <script type="text/javascript" src="./client-bundle.js"></script>
</body>

import Vue from 'vue'
import App from './App.vue'

new Vue({
  el: '#app',
  render: h => h(App)
})

这就是Vue SSR的基本实现方式及过程，当然在具体实践时还有很多细节问题需要注意，如何在服务端获取异步数据、如何处理路由等等。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：vue ssr 实现方式(学习笔记) - Python技术站

vue ssr 实现方式(学习笔记)

背景