用Golang渲染Vue模板 - Golang教程网

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模板并不容易实现，随便一想便知道其中的难点：

如v-if = "a != 0"

不过既然都是可行的，不妨试试。

制作

从构建一个最小化模型开始，我们要渲染的模板是这个样子的

<template>
  <div>
    <span class="bg-gray" :class="cus_class" :style="{'font-size': fontSize+'px'}"> {{msg}} </span>
  </div>
</template>

我们将这个组件命名为消息提示组件，它可能是这个样子

1. 解析html成节点树

golang.org/x/net/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。

目前已经运行在公司项目中，你可以访问http://zhuzi.com.cn查看渲染效果。