Writing in the front

It’s almost two weeks since Vue 2.0 was released, and I’ve been able to do some server-side rendering and isomorphism in the last two days. I’ve also implemented a wrapper around the Vue Server Renderer, which can be implemented in a much simpler code to implement Vue server-side rendering in current Node.js applications.

Vue’s server-side rendering supports streaming output and component-level caching, which makes it very fast. With the new version of VUE-Router and VUEX (VUE Family Bucket Fog), you can achieve a front and back end ishomogeneous application that can not only meet the needs of SEO, but also smooth interactive experience like SPA.

Vue-hackernews-2.0 is an isomorphic example project of VUE 2.0, using Firebase as the data layer to achieve a completely real-time hackernews flow, while still being captured as static content by search engines.

vue-ssr

Use Vue 2.0 Server-side Rendering with Express Project Address: VUE-SSR

On the first demo

No optimization has been made, but lRU is basically used to cache components. The average rendering time of the server is about 40ms. ssr.bood.in/

The installation

npm i vue-ssr --saveCopy the code

usage

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
// The static template is for demonstration only. See the example code at the end of this article
// < > is all character encoding
function indexView (req, res) = >{
    indexRenderer(req, res, ` 
         
       Cov-X {{ STYLE }}   {{ APP }}    `)
}

router.get('/', indexView)
router.get('/home', indexView)
router.get('/article', indexView)
router.get('/tag', indexView)Copy the code

API

projectName

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

// webpack config. entry: { index: ['.. /path to app client entry'],
    dashboard: ['.. /path to dashboard project client entry']},...Copy the code
const indexRenderer = vueRender({
    projectName: 'index',
    webpackServer: serverConfig
})

const dashRenderer = vueRender({
    projectName: 'dashboard',
    webpackServer: serverConfig
})Copy the code

rendererOptions

RendererOptions are configuration items of the Vue Server Renderer

Directives (directives)

Declare server-side implementations of some custom directives:

const indexRenderer = vueRender('index', {
  directives: {
    example (vnode, directiveMeta) {
    // transform vnode based on directive binding metadata
    }
  }
}, serverConfig)Copy the code

Cache

const indexRenderer = vueRender('index', {
    cache: require('lru-cache')({
        max: 1000,
        maxAge: 1000 * 60 * 15
    })
}, serverConfig)Copy the code

For more information: Why Use bundleRenderer?

Webpack Server Packaging configuration (WebPack Server)

Webpack.server.js is recommended

The introduction of the WebPack server packaging configuration into WebPack Server is complete.

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

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

The sample code

Vue-ssr-hmr-template is a scaffold for a project that uses VUE-SSR, which can be used in both front and back isomorphism, and in normal SPA mode (Node renders static pages).

  • Vue 2.0
  • Webpack 2.1.0
  • HotModuleReplacement
  • Server Side Render
  • Express