Vue SSR方案,Nuxt和Vapper怎么选?

2021-03-12 | 345浏览 | 2评论 | 标签:nuxt vapper

nuxt-or-vapper.jpg

在前端现代框架下做服务端渲染,是开历史的倒车,无奈搜索引擎至今对Javascript依然不友好。

背景

最近我花了2周时间写了一个网站(Demo地址),先后中度体验了水滴团队的Vapper和大家熟知的Nuxt,有一些感受想和大家分享。

先说结果,我最终放弃了Vapper,选择了Nuxt。

前期感受

当初选型时,Vapper最吸引我的地方是“无感”切换,只需给页面添加needSerialize:true,以很小的成本就能实现SSR同构,那是多么美妙的事。相比之下,Nuxt规则了固定的目录结构,默认还自动生成router(可自定义),并引入了如asyncData等新方法,添加了项目迁移成本。又比如Vapper允许在服务端入口created()钩子中直接使用this(Vm), 而Nuxt的服务端入口asyncData()中无法直接调用this,因此不能直接引用methods下的方法,(Nuxt 2.12之后提供fetch钩子可实现)。

后期感受

在使用Vapper完成了主体开发后,我决定放弃。原因很简单:Vapper已经大半年没维护,且全网资料实在太少了!就拿动态设置页面title来说,Vapper在入口文件定义好head后,我至今没找到合适的方式在页面内部进行二次修改,(有解决此问题的朋友请留言告知),而Nuxt在页面内部提供了head()方法,可直接修改。 Vapper默认的html模板中,lang写死为en,以至于在入口文件配置了htmlAttrs后,出现两个lang的情况,如果你有我一样的强迫症,只有手动新建一个服务端html模板来解决。Vapper官网也没有介绍部署上线相关资料,官方认为此类问题不属于其管辖范围。在用pm2部署时也折腾了一阵。此种小坑不断,网上资料寥寥无几,孤军奋战的感受贯穿始终。

在磨合了近一周时间后,我放弃了。花了半天时间切到Nuxt,上面那些问题迎刃而解。当然Nuxt也有坑,但目前遇到的问题网友们基本都填过了,不超过10分钟就能解决。

总结

就目前而言,Nuxt还是更稳妥的方案。

(本篇完。有疑问欢迎留言探讨, 如对你有帮助欢迎Buy me a coffee)

已有 2 条评论

  1. yoruponder

    route里面配meta写好title
    可以在created里面动态设置title,不需要第三方的插件来解决吧?

    1. DH

      你是指nuxt还是vapper? 如果说是vapper,服务端和客户端共用created(),你指的动态设置title是用什么方式?

留言:

*

* (方便回复通知)

打赏
编辑代码 运行结果
退出