vue-ssr-jit

A just in time compilation technique for server-side rendering. Use the Diff algorithm to derive dynamic and static nodes at runtime, and then generate and run a new rendering tree to dramatically increase rendering performance.

The following vue template:

<template>
  <div>
    <router-link to="/">{{name}}</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: 'vue-ssr-jit'
    }
  }
}
</script>

Code generated by the official compiler:

_c("div", [
  _c("router-link", {attrs: { to: "/" }}, [
    _vm._v(_vm._s(_vm.name))
  ]),
  _c("router-view")
], 1)

Code generated using vue-ssr-jit:

_c("div", [
  _vm._ssrNode(
    "<a href=\"/\" class=\"router-link-active\">vue-ssr-jit</a>"
  ),
  _c("router-view")
], 1);

Use

npm install --save vue-ssr-jit

const { createBundleRenderer } = require('vue-ssr-jit')

createBundleRenderer is consistent with the official function interface of the same name, see the vue ssr guide

It is recommended to use serverPrefetch for prefetching data, and it is also supported to use asyncData for prefetching data, see demo

Implementation principle

Vue SSR Just In Time Compilation

Be careful

This technology is currently in the experimental stage.

License

MIT