3 分鐘搞定 Vue 2.0 服務端渲染

時間 2019-11-15

標籤分鐘搞定 vue 2.0 服務渲染简体版

原文原文鏈接

寫在前面

離 Vue 2.0 發佈快有兩週了，最近兩天終於有空作了服務端渲染和同構的一些嘗試，並實現了一個對 Vue Server Renderer 的封裝，能夠用更精簡的代碼來實如今目前的 Node.js 應用中引入 Vue 服務端渲染。javascript

Vue 的服務端渲染支持流式輸出，能夠作組件級的緩存，這使得它的渲染速度也是很是快速。經過搭配新版的 vue-router 和 vuex（ Vue 全家桶大霧），能夠實現一個既能夠知足SEO需求，也如SPA同樣交互體驗流暢的先後端同構應用。html

vue-hackernews-2.0 是 Vue 2.0 的同構示例項目，使用 firebase 做爲數據層，實現了徹底實時的 hackernews 信息流，同時還能被搜索引擎當作靜態內容抓取。vue

vue-ssr

Use Vue 2.0 server-side rendering with Express
項目地址： vue-ssrjava

先上demo

尚未作優化，只是基礎使用了 lru 作了組件的緩存，服務器平均渲染時間在 40ms 左右。
ssr.bood.in/ node

安裝

npm i vue-ssr --save複製代碼

用法

const express = require('express')
const router = express.Router()

const vueRender = require('vue-ssr')

// webpack server-side bundle config
const serverConfig = require('path to webpack.server.js')

// create a project renderer
const indexRenderer = vueRender({
    projectName: 'index', 
    rendererOptions: {
        cache: require('lru-cache')({
            max: 1000,
            maxAge: 1000 * 60 * 15
        })
    }, 
    webpackServer: serverConfig
})

// handler
// 這裏的靜態模板只作演示，能夠查看文末的實例實例代碼
// 貌似在掘金 App 看着 < >全是字符編碼 
function indexView (req, res) => {
    indexRenderer(req, res, ` <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Cov-X</title> {{ STYLE }} </head> <body> {{ APP }} <script src="/dist/client-bundle.js"></script> </body> </html> `)
}

router.get('/', indexView)
router.get('/home', indexView)
router.get('/article', indexView)
router.get('/tag', indexView)複製代碼

API

projectName

project name of webpack entries that you want to server side renderingwebpack

// webpack config

...

entry: {
    index: ['../path to app client entry'],
    dashboard: ['../path to dashboard project client entry']
},

...複製代碼

const indexRenderer = vueRender({
    projectName: 'index',
    webpackServer: serverConfig
})

const dashRenderer = vueRender({
    projectName: 'dashboard',
    webpackServer: serverConfig
})複製代碼

rendererOptions

rendererOptions 即 Vue server renderer 的配置項git

指令（ directives ）

聲明一些自定義指令的服務端實現：github

const indexRenderer = vueRender('index', {
  directives: {
    example (vnode, directiveMeta) {
    // transform vnode based on directive binding metadata
    }
  }
}, serverConfig)複製代碼

緩存（ cache ）

const indexRenderer = vueRender('index', {
    cache: require('lru-cache')({
        max: 1000,
        maxAge: 1000 * 60 * 15
    })
}, serverConfig)複製代碼

更多信息能夠參考：Why Use bundleRenderer?web

webpack 服務端打包配置（ webpackServer ）

推薦參考webpack.server.jsvue-router

將 webpack 服務端打包配置引入到 webpackServer 就完成了。

const serverConfig = require('path to webpack.server.js')

const indexRenderer = vueRender({
    projectName: 'index', 
    webpackServer: serverConfig
})複製代碼