Why not Nuxt
大佬们进来一定会有一个疑问：为什么已经有vue-ssr了（如nuxt框架）还需要用go来渲染？vue-ssr提供的前后端同构、单页应用加上vue的数据绑定功能，能少写很多代码，它不香吗？
笔者的回答是香，也不香，确实Vue用它简单易上手的特性得到了很多人喜爱，也包括我，所以当我需要服务端渲染的时候，也自然的使用了vue-ssr，选用的nuxtjs.org框架，但事物总有好有坏，很快我就发现了它的问题。
性能低
如果项目是一个后台管理系统，那么首屏渲染速度和运行时的性能可能不怎么重要，但如果是一个面向C端的网站，响应速度却十分总要，因为这直接影响到用户体验。
SSR有一个优点就是首屏直出，是不是就能解决首屏慢的问题了呢？并不能。在vue-ssr渲染过程中，服务端渲染只是其中一半，当首屏数据到达浏览器之后，为了能够实现vue的响应式数据，则还需要一步操作：客户端激活，这一步的性能将影响什么呢？
如果客户端激活速度过慢会发生以下问题：
- 用户将先看到页面内容，但是会卡一小会没响应（如没办法滑动），这是因为客户端激活是一个很耗cpu的操作。
- 业务js执行变慢，如懒加载、动效代码都会在客户端激活完成之后才会执行，这会导致用户首先看不到图片或者动效，给用户卡顿的感觉，在cpu更慢的手机端尤为明显。
客户端激活的性能也是有办法调优的，比如这篇文章提到的懒激活vue-lazy-hydration：How to Drastically Reduce Estimated Input Latency and Time to Interactive of SSR Vue.js Applications，不过也许客户端激活的性能还不是重点，因为接下来还有Node端渲染的性能问题。
在我参与的项目中，由于页面功能复杂，一个页面需要500ms左右的渲染时间，也由于有动态路由参数的功能存在，没办法像静态页面一样加上缓存，就导致了在并发稍微高一点之后，响应速度越来越慢。
可扩展性低
大量的代码被封装到了nuxt里, 过多的配置项被放在了nuxt.config.js中, 不够灵活就导致了很多特性没办法实现:
- 如要修改head必须修改meta, 但vue-meta配置是有限的, 比如不支持meta标签闭合(可恶的搜狗站长认证需要闭合的meta标签).
- 如publicPath无法动态修改.
当你想做一个更复杂的网站时, nuxt虽然开箱即用但却又像一个盒子一样让你四处碰壁.
所以我决定放弃庞大笨重(对于我们的项目来说)的nuxt, 回归字符串渲染.
思考
也许在面临更为致命的性能问题时，什么响应式、数据绑定功能也不再重要，我们开始考虑传统模板引擎。
我们知道传统模板引擎的性能很好，因为他们是基于字符串拼接而不是虚拟节点再转dom，但美中不足的是他们都不如vue模板美观好用（就不对比JSX了，抱歉我对JSX不熟悉），可以预见当项目复杂之后传统模板的代码将一团糟。
正好笔者熟悉Golang和Vue，如果能让Golang在后端发挥它的优点（并发、性能），让Vue（模板）发挥它的优点（简洁、专业、现代化），何乐而不为？
难点
使用Go来渲染Vue模板并不容易实现，随便一想便知道其中的难点：
- 解析vue各种语法（如slot、v-if、v-for）并一一实现，这可能不复杂，但工作量很大。
- 解析js表达式，在模板中会大量使用到js表达式，
如v-if = "a != 0"，现在需要使用Go去计算这些表达式，虽然知道有AST（抽象语法树） 这是可行的，但工作量也很大。 - 生成Go代码，为了减少运行时损耗，和webpack打包原理一样，我们需要提前对代码进行处理，也就是生成中间代码。和vue-loader类似，在这个项目中，需要我们从Vue模板生成render函数，不同的是我们的render函数是Golang语言的。
不过既然都是可行的，不妨试试。
制作
从构建一个最小化模型开始，我们要渲染的模板是这个样子的
<template>
<div>
<span class="bg-gray" :class="cus_class" :style="{'font-size': fontSize+'px'}"> {{msg}} </span>
</div>
</template>
我们将这个组件命名为消息提示组件，它可能是这个样子
element-ui alert
1. 解析html成节点树
解析html比我想象中复杂，这是因为有自闭合和不闭合的标签，如<meta charset="UTF-8">，如果使用xml的处理逻辑的话需要做很多额外判断，为了不重复造轮子，最终选用golang.org/x/net/html包来解析html，不过值得注意的是正规的html格式有一些要求：如select里只能包含option子节点，但Vue模板由于有自定义组件和slot语法等，可能不满足html的要求，这会让html包无法正确解析出节点，由于没有更好的解析包作为代替，无奈只好魔改一点html包了，改好的代码在项目里，可以翻到文末查阅。
2. 解析vue模板语法
这一步十分简单，我们只需要递归遍历html节点数中的节点，根据节点的attr，再生成一个vue节点结构体，其中包含如porps，v-if等信息。这一步是为了方便的从节点树生成Golang代码。
3. 生成Go代码
递归节点
我们需要根据节点生成Go代码，特别要处理的是vue的各个指令，如v-if需要生成如下的Go代码
var s = ""
if xxx {
s = "<div></div>"
} else {
s = "text"
}
retun s
v-for如下
var s = ""
for i, v := range arr{
s+= "<div></div>"
}
return s
这里不难，唯一难点是v-if/v-else/v-else-if的关联关系，我也是参考vue官方的模板处理方法才实现的。
解析 Js AST
在v-if或者{{}}中需要使用一些js表达式，如 v-if="a!=b && a!=c"，幸运的是Golang有一个库可以解析JS AST: https://github.com/robertkrimen/otto, 唯一不足就是只支持ES5, 不过ES5在模板中足够了.
得到Js AST之后就需要将AST翻译成Golang，难度不大，多写几个switch case就好。代码在此
最终生成的Go代码会像这样：
// Code generated by go-vue-ssr: https://github.com/zbysir/go-vue-ssr
// src_hash:535087cd1e2031e7772d0d62e5390830
package main
func (r *Render) Component_info(options *Options) string {
this := extendMap(r.Prototype, options.Props)
_ = this
return r.tag("div", true, &Options{
Style: map[string]string{"text-align": "center"},
Slot: map[string]NamedSlotFunc{"default": func(props map[string]interface{}) string {
return "<p style=\"padding: 10px 0; \"" + mixinAttr(nil, nil, map[string]interface{}{"height": interfaceAdd(lookInterface(this, "height"), 1)}) + ">" + interfaceToStr(lookInterface(this, "slogan"), true) + "</p><img" + mixinAttr(nil, map[string]string{"alt": "todo logo", "height": "50px"}, map[string]interface{}{"src": lookInterface(this, "logo")}) + "></img>"
}},
P: options,
Data: this,
})
}
现在只需要调用则可以返回html字符串
r := NewRender()
htmlStr := r.Component_info(&Options{
Props: map[string]interface{}{
"title": "go-vue-ssr",
"slogan": "Hey vue go",
"info": map[string]interface{}{
"author": "bysir",
"Hey vue go":"Hey vue go",
},
"logo": "https://avatars2.githubusercontent.com/u/13434040?s=88&v=4",
"height": 100.1,
},
})
结果
项目已经开源，希望能让喜爱Vue和Go的伙伴们多一个可尝试的东西，同时也感谢你的ISSUE。
- https://github.com/zbysir/go-vue-ssr :预编译成go语言运行。
- https://github.com/zbysir/vpl :直接运行模板，更方便。
目前已经运行在公司项目中，你可以访问http://zhuzi.com.cn查看渲染效果。
网友评论