摘要：三個(gè)配置文件以此如下改配置只是簡(jiǎn)單的配置等的使用，接著提取資源文件，指定輸出的目錄，而入口文件則分別在和的中配置。將指向應(yīng)用程序的文件允許適用方式處理動(dòng)態(tài)導(dǎo)入，提供支持使用風(fēng)格導(dǎo)出模塊不要外置化需要處理的依賴模塊。

將同一個(gè)組件渲染為服務(wù)器端的 HTML 字符串，將它們直接發(fā)送到瀏覽器，最后將靜態(tài)標(biāo)記"混合"為客戶端上完全交互的應(yīng)用程序。

To solve

首屏渲染問題

SEO問題

vue-ssr
├── build                 (webapck編譯配置)
├── components            (vue 頁面) 
├── dist                  (編譯后的靜態(tài)資源目錄)
├── api.js                (請(qǐng)求接口，模擬異步請(qǐng)求)
├── app.js                (創(chuàng)建Vue實(shí)例入口)
├── App.vue               (Vue頁面入口)
├── entry-client.js       (前端執(zhí)行入口)
├── entry-server.js       (后端執(zhí)行入口)
├── index.template.html   (前端渲染模板)
├── router.js             (Vue路由配置)
├── server.js             (Koa服務(wù))
├── store.js              (Vuex數(shù)據(jù)狀態(tài)中心配置)

這張圖相信很多大佬們都看過N遍了，每個(gè)人理解不同，我發(fā)表一下自己個(gè)人的理解，如果有什么理解錯(cuò)誤請(qǐng)?jiān)徫摇?/p>

先看Source部分，Source部分先由app.js引入Vue全家桶，至于Vue全家桶如何配置后面會(huì)說明。app.js其實(shí)就是創(chuàng)建一個(gè)注冊(cè)好各種依賴的Vue對(duì)象實(shí)例，在SPA單頁環(huán)境下，我們只需要拿到這個(gè)Vue實(shí)例，然后指定掛載到模板特定的dom結(jié)點(diǎn)，然后丟給webpack處理就完事了。但是SSR在此分為兩部分，一部分是前端單頁，一部分是后端直出。于是，Client entry的作用是掛載Vue對(duì)象實(shí)例，并由webpack進(jìn)行編譯打包，最后在瀏覽器渲染。Server entry的作用是拿到Vue對(duì)象實(shí)例，并處理收集頁面中的asynData，獲取對(duì)應(yīng)的數(shù)據(jù)上下文，然后再由webpack解析處理。最后Node Server端中使用weback編譯好的兩個(gè)bundle文件( 服務(wù)器需要「服務(wù)器 bundle」然后用于服務(wù)器端渲染(SSR)，而「客戶端 bundle」會(huì)發(fā)送給瀏覽器，用于混合靜態(tài)標(biāo)記。)，當(dāng)用戶請(qǐng)求頁面時(shí)候，這時(shí)候服務(wù)端會(huì)先使用SSR來生成對(duì)應(yīng)的頁面文檔結(jié)構(gòu)，而在用戶切換路由則是使用了SPA的模式。

Koa2 + Vue2 + Vue-router + Vuex

先來配置vue-router, 生成router.js

import Vue from "vue"
import Router from "vue-router"
import Bar from "./components/Bar.vue"
import Baz from "./components/Baz.vue"
import Foo from "./components/Foo.vue"
import Item from "./components/Item.vue"

Vue.use(Router)

export const createRouter = () => {
  return new Router({
    mode: "history",
    routes: [
      { path: "/item/:id", component: Item },
      { path: "/bar", component: Bar },
      { path: "/baz", component: Baz },
      { path: "/foo", component: Foo }
    ]
  })
}

為每個(gè)請(qǐng)求創(chuàng)建一個(gè)新的Vue實(shí)例，路由也是如此，通過一個(gè)工廠函數(shù)來保證每次都是新創(chuàng)建一個(gè)Vue路由的新實(shí)例。

配置Vuex, 生成store.js

import Vue from "vue"
import Vuex from "vuex"
import { fetchItem } from "./api"

Vue.use(Vuex)

export const createStore = () => {
  return new Vuex.Store({
    state: {
      items: {}
    },
    actions: {
      fetchItem ({ commit }, id) {
        return fetchItem(id).then(item => {
          commit("setItem", { id, item })
        })
      }
    },
    mutations: {
      setItem (state, { id, item }) {
        Vue.set(state.items, id, item)
      }
    }
  })
}

同樣也是通過一個(gè)工廠函數(shù)，來創(chuàng)建一個(gè)新的Vuex實(shí)例并暴露該方法

創(chuàng)建Vue實(shí)例，生成app.js

import Vue from "vue"
import App from "./App.vue"
import { createRouter } from "./router"
import { createStore } from "./store"
import { sync } from "vuex-router-sync"

export const createApp = ssrContext => {
  const router = createRouter()
  const store = createStore()

  sync(store, router)

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

通過使用我們編寫的createRouter, createStore來每次都創(chuàng)建新的Vue-router和Vuex實(shí)例，保證和Vue的實(shí)例一樣都是重新創(chuàng)建過的，接著掛載注冊(cè)router和store到Vue的實(shí)例中，提供createApp傳入服務(wù)端渲染對(duì)應(yīng)的數(shù)據(jù)上下文。

到此我們已經(jīng)基本完成source部分的工作了。接著就要考慮如何去編譯打包這些文件，讓瀏覽器和Node服務(wù)端去運(yùn)行解析。

前端打包入口文件: entry-client.js

import { createApp } from "./app"

const { 
  app, 
  store,
  router 
} = createApp()
if (window.__INITIAL_STATE__) {
  store.replaceState(window.__INITIAL_STATE__)
}

router.onReady(() => {
  router.beforeResolve((to, from, next) => {
    const matched = router.getMatchedComponents(to)
    const prevMatched = router.getMatchedComponents(from)
    let diffed = false
    const activated = matched.filter((c, i) => {
      return diffed || (diffed = (prevMatched[i] !== c))
    })
    if (!activated.length) {
      return next()
    }
    Promise.all(activated.map(c => {
      if (c.asyncData) {
        return c.asyncData({ store, route: to })
      }
    })).then(() => {
      next()
    }).catch(next)
  })
  app.$mount("#app")
})

客戶端的entry只需創(chuàng)建應(yīng)用程序，并且將其掛載到 DOM 中， 需要注意的是，任然需要在掛載 app 之前調(diào)用 router.onReady，因?yàn)槁酚善鞅仨氁崆敖馕雎酚膳渲弥械漠惒浇M件，(如果你有使用異步組件的話，本項(xiàng)目沒有使用到異步組件，但后續(xù)考慮加入) 才能正確地調(diào)用組件中可能存在的路由鉤子。通過添加路由鉤子函數(shù)，用于處理 asyncData，在初始路由 resolve 后執(zhí)行，以便我們不會(huì)二次預(yù)取(double-fetch)已有的數(shù)據(jù)。使用 router.beforeResolve()，以便確保所有異步組件都 resolve，并對(duì)比之前沒有渲染的組件找出兩個(gè)匹配列表的差異組件，如果沒有差異表示無需處理直接next輸出。

服務(wù)端渲染的執(zhí)行入口文件: entry-server.js

import { createApp } from "./app"

export default context => {
  return new Promise((resolve, reject) => {
    const { 
      app, 
      store,
      router 
    } = createApp(context)

    router.push(context.url)

    router.onReady(() => {
      const matchedComponents = router.getMatchedComponents()
      if (!matchedComponents.length) {
        return reject({ code: 404 })
      }

      Promise.all(matchedComponents.map(Component => {
        if (Component.asyncData) {
          return Component.asyncData({
            store,
            route: router.currentRoute
          })
        }
      })).then(() => {
        context.state = store.state
        resolve(app)
      }).catch(reject)
    }, reject)
  })
}

服務(wù)器 entry 使用 default export 導(dǎo)出函數(shù)，并在每次渲染中重復(fù)調(diào)用此函數(shù)。此時(shí)，創(chuàng)建和返回應(yīng)用程序?qū)嵗?，還在此執(zhí)行服務(wù)器端路由匹配(server-side route matching)和數(shù)據(jù)預(yù)取邏輯(data pre-fetching logic)。在所有預(yù)取鉤子(preFetch hook) resolve 后，我們的 store 現(xiàn)在已經(jīng)填充入渲染應(yīng)用程序所需的狀態(tài)。當(dāng)我們將狀態(tài)附加到上下文，并且 template 選項(xiàng)用于 renderer 時(shí)，狀態(tài)將自動(dòng)序列化為 window.__INITIAL_STATE__，并注入 HTML。

直接上手weback4.x版本

webpack配置分為3個(gè)配置，公用配置，客戶端配置，服務(wù)端配置。

三個(gè)配置文件以此如下：

base config:

const path = require("path")
const webpack = require("webpack")
const ExtractTextPlugin = require("extract-text-webpack-plugin")

module.exports = {
  devtool: "#cheap-module-source-map",
  output: {
    path: path.resolve(__dirname, "../dist"),
    publicPath: "/",
    filename: "[name]-[chunkhash].js"
  },
  resolve: {
    alias: {
      "public": path.resolve(__dirname, "../public"),
      "components": path.resolve(__dirname, "../components")
    },
    extensions: [".js", ".vue"]
  },
  module: {
    rules: [
      {
        test: /.vue$/,
        use: {
          loader: "vue-loader"
        }
      },
      {
        test: /.js$/,
        use: "babel-loader",
        exclude: /node_modules/
      },
      {
        test: /.css$/,
        use: "css-loader"
      }
    ]
  },
  performance: {
    maxEntrypointSize: 300000,
    hints: "warning"
  },
  plugins: [
    new ExtractTextPlugin({
      filename: "common.[chunkhash].css"
    })
  ]
}

改配置只是簡(jiǎn)單的配置vue, css, babel等loader的使用，接著ExtractTextPlugin提取css資源文件，指定輸出的目錄，而入口文件則分別在client和server的config中配置。

client config

const webpack = require("webpack")
const merge = require("webpack-merge")
const path = require("path")
const baseConfig = require("./webpack.base.config.js")
const VueSSRClientPlugin = require("vue-server-renderer/client-plugin")


module.exports = merge(baseConfig, {
  entry: path.resolve(__dirname, "../entry-client.js"),
  plugins: [
    new VueSSRClientPlugin()
  ],
  optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          chunks: "initial",
          minChunks: 2, maxInitialRequests: 5,
          minSize: 0
        },
        vendor: {
          test: /node_modules/,
          chunks: "initial",
          name: "vendor",
          priority: 10,
          enforce: true
        }
      }
    },
    runtimeChunk: true
  }
})

客戶端的入口文件，使用VueSSRClientPlugin生成對(duì)應(yīng)的vue-ssr-client-manifest.json的映射文件，然后添加vendor的chunk分離。

server config

const merge = require("webpack-merge")
const path = require("path")
const nodeExternals = require("webpack-node-externals")
const baseConfig = require("./webpack.base.config.js")
const VueSSRServerPlugin = require("vue-server-renderer/server-plugin")


module.exports = merge(baseConfig, {
  // 將 entry 指向應(yīng)用程序的 server entry 文件
  entry: path.resolve(__dirname, "../entry-server.js"),
  // 允許 webpack Node 適用方式(Node-appropriate fashion)處理動(dòng)態(tài)導(dǎo)入(dynamic import)，
  target: "node",
  // 提供 source map 支持
  devtool: "source-map",
  // 使用 Node 風(fēng)格導(dǎo)出模塊(Node-style exports)
  output: {
    filename: "server-bundle.js",
    libraryTarget: "commonjs2"
  },
  externals: nodeExternals({
    // 不要外置化 webpack 需要處理的依賴模塊。
    // 你可以在這里添加更多的文件類型。例如，未處理 *.vue 原始文件，
    // 你還應(yīng)該將修改 `global`（例如 polyfill）的依賴模塊列入白名單
    whitelist: /.css$/
  }),
  // 這是將服務(wù)器的整個(gè)輸出
  // 構(gòu)建為單個(gè) JSON 文件的插件。
  // 默認(rèn)文件名為 `vue-ssr-server-bundle.json`
  plugins: [
    new VueSSRServerPlugin()
  ]
})

到此打包的流程已經(jīng)結(jié)束了，server端配置參考了官網(wǎng)的注釋。

const { createBundleRenderer } = require("vue-server-renderer")
const serverBundle = require("./dist/vue-ssr-server-bundle.json")
const clientManifest = require("./dist/vue-ssr-client-manifest.json")
const fs = require("fs")
const path = require("path")

const Koa = require("koa")
const KoaRuoter = require("koa-router")
const serve = require("koa-static")

const app = new Koa()
const router = new KoaRuoter()

const template = fs.readFileSync(path.resolve("./index.template.html"), "utf-8")

const renderer = createBundleRenderer(serverBundle, {
  // 推薦
  runInNewContext: false,
  // （可選）頁面模板
  template, 
  // （可選）客戶端構(gòu)建 manifest
  clientManifest 
})

app.use(serve(path.resolve(__dirname, "./dist")))

router.get("*", (ctx, next) => {
  ctx.set("Content-Type", "text/html")
  return new Promise((resolve, reject) => {
    const handleError = err => {
      if (err && err.code === 404) {
          ctx.status = 404
          ctx.body = "404 | Page Not Found"
      } else {
          ctx.status = 500
          ctx.body = "500 | Internal Server Error"
          console.error(`error during render : ${ctx.url}`)
          console.error(err.stack)
      }
      resolve()
    }
    console.log(ctx.url)
    const context = { url: ctx.url, title: "Vue SSR" }
  
    // 這里無需傳入一個(gè)應(yīng)用程序，因?yàn)樵趫?zhí)行 bundle 時(shí)已經(jīng)自動(dòng)創(chuàng)建過。
    // 現(xiàn)在我們的服務(wù)器與應(yīng)用程序已經(jīng)解耦！
    renderer.renderToString(context, (err, html) => {
      // 處理異?！?      if (err) {
        handleError(err)
      }
      ctx.body = html
      resolve()
    })
  })
})

app.use(router.routes()).use(router.allowedMethods())

const port = 3000
app.listen(port, "127.0.0.1", () => {
    console.log(`server running at localhost:${port}`)
})

最后效果當(dāng)然是這樣的了:

參考文檔:

vue-ssr官方文檔

代碼倉庫:

github鏈接