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);npm install --save vue-ssr-jitconst { 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
Vue SSR Just In Time Compilation
This technology is currently in the experimental stage.