Vue: Improve server rendering performance with string templates

[jialunguo]

Versions

Vue 2.0.1
vue-server-renderer 2.0.1
Windows 7

What is Expected?

vue-server-renderer faster.
server-render is just for rendering html string, reusing code with browser side maybe easier to maintenance, but still cause lower performance which can't be ignore, especially using it with giant number of users(qq qzone hybrid website).

What is actually happening?

Using virtual dom to render html string on server side will cost more time which is about 10-20 times than traditional template engine without using virtual dom.

Reproduction repository

I write a small js called jscHelper to convert vue virtual dom tree to normal render function for improving performance.
But the compatibility is not good.
So I hope there will be an original way to solving it.
https://github.com/jialunguo/vue-server-render-jscHelper.git

[yyx990803]

Thanks for the suggestion. We are obviously aware of the fact that the virtual-dom-based SSR is slower than string-based ones; but one important reason for Vue's SSR to be virtual-dom-based is so that it fully supports manually written render functions as well. This is critical for advanced components such as <transition>, <keep-alive>, <router-view> etc. to work properly - a lot of these features are simply impossible with plain string templates.

It may be possible to use a hybrid strategy where we render simple components using string concatenation, but advanced ones using the current vdom-based algorithm. If the user's app contains large amount of template-only components this should still result in significant perf win.

[jialunguo]

Thank you, hybrid strategy is a good idea, we can use it to render most of our simple pages, without affecting other advanced parts. Hope we can use it in next version.

[william-xue]

你们英语真棒

[xiaogaofudao]

有结果么？ 字符串拼接相比 nuxt 的方式性能如何。

[yyx990803]

So - the hybrid strategy will land in 2.4 with 2~8x raw render perf increase depending on how much of the template can be stringified. Due to the "hybrid-ness", it will not be as performant as pure string templates, but will be pretty close in scenarios where no render-function-based components are involved.

Also note when we talk about "raw render perf" it means benchmarking the render call only. In terms of requests per second in a real app, there are many other aspects involved and raw render perf is only a small portion of the overall time.

@xiaogaofudao this has nothing to do with Nuxt because Nuxt is a wrapper on top Vue, so the improvements benefit Nuxt as well.

[geforcesong]

The new hybrid strategy will be adopt by VUE automatically? Are there any settings we need before we benefit from it?

[shishiv30]

Similar question, if we don't use advantage components, will render engine use string concatenation automatically?

[jianggle]

It doesn't matter...