Day 28: 介绍 Vue 的 Server Side Render

虽然一开始说 Vue 因为有 Single File Component ，所以要 Server Side Render 可能会碰到需要用 bundler 的情况，不过用 React 时，在最後碰到图片时还是非要用 hook require 的方式来解决，实际上早点用 bundler 或许也不用做到这样，回到正题，虽然我个人是 React 派的，但 Vue 在某些方面真的做的很好，这篇也会提到

Vue 做好了什麽

这边提到的只是就这个系列而言，我没有要来写一篇 React 跟 Vue 的比较文 (虽然我写过，但那是很久以前的事了)

在 Vuex 中分离 action 与 mutation

还记得我们把 Redux 的 actions 全部保存下来吗？但实际上有些只是用来触发 AJAX 之类的非同步的工作用的 action ，并不是真的要改变资料，而在 Vuex 中， action 跟 mutation 有明确的工作分别， mutation 才能改变资料，如果用 Vuex 就只要保存 mutation 就够了

非同步的 vue-router

或许知道这个东西的人可能比较少， vue-router 的 middleware 是非同步的，所以 vue-router 从网址改变，到实际跳转网页前还可以做一些事，也可以反悔，取消掉使用者的跳转， react-router 则是要跳转完才可以开始动作，不知道你有没有想到这东西可以用在哪？可以用在抓资料上，只要在 middleware 中加入抓资料的程序码，我们也不用自己先把资料抓完才开始 render 了，只要等到 vue-router 通知我们网址已经转过去了 (正常情况下应该是没有机会用到 router.onReady 这个 API 吧)

SFC

这个其实有好有坏，坏处之前讲过了，因为一定要编译，所以初期会多出 bundler 要设定，不过好处是除了现有的 html, script 跟 style ，它可以加入自订的区块，这个功能也很少用，不过你可以看看 Gridsome ，它就用这个功能来放 page query 跟 static query ，虽然 page query 没有这个问题，但 static query 是要用 babel 从原始码中抽出来的，它也是正常的程序码的一部份，要从一份原始码中将其区格出来也是一个麻烦，虽然差别我是没有觉得到很大

Vue 的 SSR

Vue 基本的 SSR 该说是大同小异吗？同样的也是 renderToString 跟 renderToStream，不过不一样的是，该说 Vue 的定位真不愧是框架， html 的 template 也可以由它产生， Vuex 的初始 state 也会帮你加入产生的 html 中 (前题是如果你有提供的话)

Vue 的元件其实有个 API 叫 serverPrefetch，它会在 Server 端被执行，让你可以在 Server 端呼叫 Vuex 的 action ，从而把资料存进去：

<script>
import {mapActions} from 'vuex'
export default {
  serverPrefetch() {
    return this.fetchData()
  },

  methods: {
    ...mapActions(['fetchData']),
  },
}
</script>

这个 API Vue 也会自动的等待它完成，所以在 Vue 中，完全不用担心之前碰到的什麽 render 过程是同步的问题，另外 Vue 的元件上还有个属性：

<script>
export default {
  // created 跟 beforeCreate 才会在 server 端执行，但 beforeCreate 时 Vue 的 instance 又还没建好
  created() {
    // 这个物件会跟 render 时传入的一个物件是同一个，所以可以用这边传资料回去给 render 的程序
    this.$ssrContext.foo = 42
  }
}
</script>

在 render 时 Vue 要传入一个 object ：

import { createRenderer } from 'vue-server-renderer'

const renderer = createRenderer()

// 这就会是上面的 `$ssrContext`
const context = {}
// 这样就能取得完整的 html
const html = await renderer.renderToString(app, context)

下一篇我们再来实际用一次 Vue 的 SSG