vue 服务端渲染折腾记录

为了解决 vue 项目的 seo 问题，最近研究了下服务端渲染，所以就有了本文的记录。

项目结构

├─.babelrc // babel 配置文件
├─index.template.html // html 模板文件
├─server.js // 提供服务端渲染及 api 服务
├─src // 前端代码
|  ├─app.js // 主要用于创建 vue 实例
|  ├─App.vue // 根组件
|  ├─entry-client.js // 客户端渲染入口文件
|  ├─entry-server.js // 服务端渲染入口文件
|  ├─stores // vuex 相关
|  ├─routes // vue-router 相关
|  ├─components // 组件
├─dist // 代码编译目标路径
├─build // webpack 配置文件

项目的主要目录结构如上所示，其中 package.json 请查看项目。关于为什么要使用状态管理库 Vuex，官网有明确的解释。后文有例子帮助进一步理解。

接下来我们暂时不管服务端渲染的事情，先搭建一个简单的 vue 的开发环境。

搭建 vue 开发环境

利用 webpack 可以非常快速的搭建一个简单的 vue 开发环境，可以直接乘电梯前往。

为了高效地进行开发，vue 开发环境应该有代码热加载和请求转发的功能。这些都可以使用 webpack-dev-server 来轻松实现，只需配置 webpack 的 devServer 项：

module.exports = merge(baseWebpackConfig, {
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true,
    proxy: config.proxy
  },
  devtool: '#eval-source-map',
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.template.html',
      inject: true // 插入css和js
    }),
    new webpack.HotModuleReplacementPlugin(),
    new FriendlyErrors()
  ]
})

然后启动时添加 --hot 参数即可：

cross-env NODE_ENV=development webpack-dev-server --config build/webpack.dev.conf.js --open --hot

注意到 router 和 store 以及 vue 都采用了工厂函数来生成实例，这是为了方便代码在后面的服务端渲染中进行复用，因为 “Node.js 服务器是一个长期运行的进程。必须为每个请求创建一个新的 Vue 实例” (官网)。

同样，前端请求使用的是 axios 库，也是为了照顾服务端。

在项目根目录下运行 npm run server 启动后端 api 服务，然后运行 npm run dev ，webpack 会自动在默认浏览器中打开 http://localhost:8080 地址，即可看到效果。

服务端渲染

基于上面搭建好的项目基础上来搭建服务端渲染就比较容易了，让我们开始吧。或者直接看最后的代码。

要实现服务端渲染，只需增加如下 webpack 配置：

module.exports = merge(baseWebpackConfig, {
  entry: './src/entry-server.js',
  // 告知 `vue-loader` 输送面向服务器代码(server-oriented code)。
  target: 'node',
  output: {
    filename: 'server-bundle.js',
    libraryTarget: 'commonjs2',
  },
  plugins: [
     new VueSSRServerPlugin()
  ]
})

注意到 entry 的文件路径跟之前的不太一样，这里使用的是专门为服务端渲染准备的入口文件：

import { createApp } from './app'
// 这里的 context 是服务端渲染模板时传入的
export default context => {
  // 因为有可能会是异步路由钩子函数或组件，所以我们将返回一个 Promise，
  // 以便服务器能够等待所有的内容在渲染前，
  // 就已经准备就绪。
  return new Promise((resolve, reject) => {
    const { app, router, store } = createApp()

    const { url } = context
    const { fullPath } = router.resolve(url).route

    if (fullPath !== url) {
      return reject({ url: fullPath })
    }

    router.push(url)

    // 等到 router 将可能的异步组件和钩子函数解析完
    router.onReady(() => {
      const matchedComponents = router.getMatchedComponents()
      // 匹配不到的路由，执行 reject 函数，并返回 404
      if (!matchedComponents.length) {
        return reject({ code: 404 })
      }

      // 执行所有组件中的异步数据请求
      Promise.all(matchedComponents.map(({ asyncData }) => asyncData && asyncData({
        store,
        route: router.currentRoute
      }))).then(() => {
        context.state = store.state
        resolve(app)
      }).catch(reject)
    }, reject)
  })
}

其中的 asyncData 可能会让人疑惑，稍后我们用一个例子来说明。现在，然我们来编译一下，运行 npm run build:server ，将会在 dist 目录下得到 vue-ssr-server-bundle.json 文件。可以看到，该文件包含了 webpack 打包生成的所有 chunk 并指定了入口。后面服务端会基于该文件来做渲染。

现在就让我们移步服务端，新增一些代码：

...
 const { createBundleRenderer } = require('vue-server-renderer')
 const bundle = require('./dist/vue-ssr-server-bundle.json')

 const renderer = createBundleRenderer(bundle, {
   template: fs.readFileSync('./index.template.html', 'utf-8')
 })
...
// 服务端渲染
server.get('*', (req, res) => {
  const context = { url: req.originalUrl }
  renderer.renderToString(context, (err, html) => {
    if (err) {
      if (err.code === 404) {
        res.status(404).end('Page not found')
      } else {
        res.status(500).end('Internal Server Error')
      }
    } else {
      res.end(html)
    }
  })
})

新增代码不多，首先使用上面生成的文件创建了一个 renderer 对象，然后调用其 renderToString 方法并传入包含请求路径的对象作为参数来进行渲染，最后将渲染好的数据即 html 返回。

运行 npm run server 启动服务端，打开 http://localhost:8081 就可以看到效果了：

image.png

关于 asyncData

前面提到了 asyncData ，现在以该例子来梳理一下。首先，看看组件中的代码：

...
<script>
export default {
  asyncData ({ store, route }) {
    // 触发 action 后，会返回 Promise
    return store.dispatch('fetchItems')
  },
  data () {
    return {
      title: "",
      content: ""
    }
  },
  computed: {
    // 从 store 的 state 对象中的获取 item。
    itemList () {
      return this.$store.state.items
    }
  },
  methods: {
    submit () {
      const {title, content} = this
      this.$store.dispatch('addItem', {title, content})
    }
  }
}
</script>

这是一个很简单的组件，包括一个列表，该列表的内容通过请求从后端获取，一个表单，用于提交新的记录到后端保存。其中 asyncData 是我们约定的函数名，表示渲染组件需要预先执行它获取初始数据，它返回一个 Promise，以便我们在后端渲染的时候可以知道什么时候该操作完成。这里，该函数触发了 fetchItems 以更新 store 中的状态。还记得我们的 entry-server.js 文件吗，里面正是调用了组件的 asyncData 方法来进行数据预取的。

在开发阶段，我们同样需要进行数据预取，为了复用 asyncData 代码，我们在组件的 beforeMount 中调用该方法，我们将这个处理逻辑通过 Vue.mixin 混入到所有的组件中：

Vue.mixin({
  beforeMount() {
    const { asyncData } = this.$options
    if (asyncData) {
      // 将获取数据操作分配给 promise
      // 以便在组件中，我们可以在数据准备就绪后
      // 通过运行 `this.dataPromise.then(...)` 来执行其他任务
      this.dataPromise = asyncData({
        store: this.$store,
        route: this.$route
      })
    }
  }
})

还有一个问题就是我们生成的 html 中并没有引入任何 js，用户无法进行任何交互，比如上面的列表页，用户无法提交新的内容。当然，如果这个页面是只给爬虫来“看”的话这样就足够了，但如果考虑到真实的用户，我们还需要在 html 中引入前端渲染的 js 文件。

前端渲染

该部分的代码可以直接查看这里。

前端渲染部分需要先增加一个 webpack 的配置文件用于生成所需的 js, css 等静态文件：

module.exports = merge(baseWebpackConfig, {
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false,
        drop_console: true
      }
    }),
    // 重要信息：这将 webpack 运行时分离到一个引导 chunk 中，
    // 以便可以在之后正确注入异步 chunk。
    // 这也为你的 应用程序/vendor 代码提供了更好的缓存。
    new webpack.optimize.CommonsChunkPlugin({
      name: "manifest",
      minChunks: Infinity
    }),
    // 此插件在输出目录中
    // 生成 `vue-ssr-client-manifest.json`。
    new VueSSRClientPlugin()
  ]
})

同时，前端渲染还需要有自己的入口文件 entry-client，该文件在讲 asyncData 的时候有所提及：

import Vue from 'vue'
import {
  createApp
} from './app.js'
// 客户端特定引导逻辑……
const {
  app,
  router,
  store
} = createApp()
if (window.__INITIAL_STATE__) {
  store.replaceState(window.__INITIAL_STATE__)
}

Vue.mixin({
  beforeMount() {
    const { asyncData } = this.$options
    if (asyncData) {
      // 将获取数据操作分配给 promise
      // 以便在组件中，我们可以在数据准备就绪后
      // 通过运行 `this.dataPromise.then(...)` 来执行其他任务
      this.dataPromise = asyncData({
        store: this.$store,
        route: this.$route
      })
    }
  }
})
// 这里假定 App.vue 模板中根元素具有 `id="app"`
router.onReady(() => {
  app.$mount('#app')
})

现在我们 npm run build:client 编译一下，dist 目录中可以得到若干文件：

0.js
1.js
2.js
app.js
manifest.js
vue-ssr-client-manifest.json

其中，js 文件都是需要引入的文件，json 文件像是一个说明文档，这里暂不讨论其原理，感兴趣的可以查看这里。

最后，server.js 中，稍微做一点点修改：

 const clientManifest = require('./dist/vue-ssr-client-manifest.json')

 const renderer = createBundleRenderer(bundle, {
   template: fs.readFileSync('./index.template.html', 'utf-8'),
   clientManifest
 })

然后 npm run server 启动服务，再打开 http://localhost:8081，可以看到渲染后的 html 文件中已经引入了 js 资源了。

image.png

列表页中也可以提交新记录了：

image.png

总结

本文先从搭建一个简单的 vue 开发环境开始，然后基于此实现了服务端渲染，并引入了客户端渲染所需的资源。通过这个过程跑通了 vue 服务端渲染的大致流程，但很多地方还需更进一步深入：

  • 样式的处理
    本文并没有对样式进行处理，需进一步研究

  • 编译后文件的解释
    文章中编译生成的 json 等文件到底是怎么用的呢？

  • 针对爬虫和真实用户的不同策略
    服务端渲染其实主要是用来解决 seo 的问题，所以可以在服务端通过请求头判断来源并做不同处理，若是爬虫则进行服务端渲染（不需要引入客户端渲染所需的资源），若是普通用户则还是用原始的客户端渲染方式。

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,772评论 6赞 477
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,458评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,610评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,640评论 1赞 276
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,657评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,590评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,962评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,631评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,870评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,611评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,704评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,386评论 4赞 319
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,969评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,944评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,179评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 44,742评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,440评论 2赞 342

推荐阅读更多精彩内容

  • Egg + Vue 服务端渲染工程化建设
    在实现 egg + vue 服务端渲染工程化实现之前，我们先来看看前面两篇关于Webpack构建和Egg的文章： ...
    hubcarl阅读 5,999评论 0赞 19
  • World
    所有程序员的第一行只有王小波的李银河我和另一个人格和平相处的国界 一块煤球里的蜂后笑话蝼蚁去保卫家园手拿菜刀的小贩...
    张废材阅读 82评论 3赞 1
  • NAIVE的曾经（2）
    这个程也是我刚学完Free PASCAL的语法时自己编的。 不忘初心是美好的，但是我还是忘记了我做这个是干什么用的...
    阔爷阅读 224评论 0赞 0