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
})复制代码

示例代码

vue-ssr-hmr-template是一个使用了 vue-ssr 的项目脚手架，既能够使用先后端同构，也能够使用普通的spa模式（node 渲染静态页）。

Vue 2.0
Webpack 2.1.0
HotModuleReplacement
Server Side Render
Express