在前端现代框架下做服务端渲染,是开历史的倒车,无奈搜索引擎至今对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还是更稳妥的方案。
热门文章
- 微信小程序“拍照识图”上线(63,957)
- YouTube评论翻译插件《油管评论翻译机》上线了(61,280)
- 基金助手--chrome浏览器插件(45,587)
- 拍照识别彩票结果在线工具(32,126)
- vue+tabs动态组件方案漫谈(26,598)
- 《油管评论翻译机》使用说明书(26,035)
- 网页打印插件Print.js(24,108)
- 自用YouTube抓取评论+翻译工具(23,590)
- YouTube评论导出免费在线工具(18,446)
- px转rem/vw方法小结(17,603)
请问我用nuxtjs框架,页面组件使用asyncData获取异步数据,发布到服务器后,第一次进入页面正常,刷新整个页面出现server error,日志上报504,是怎么回事呢?还有就是子组件,要使用fetch()的话,fecth必须和store结合使用么?
刷新后504我没遇到过,我只遇到过第一次重启后第一次加载失败,刷新后正常。
子组件使用fetch,不是必须要和store结合。
我已经放弃Nuxt大半年了,因为SEO效果一直起不来。
最近在学习vue的ssr,请问在实际开发中,如果想要实现ssr一般是使用nuxt还是按照vue官网的指南?
Vue官方文档里已经给出了答案 https://ssr.vuejs.org/zh/#%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%AB%AF%E6%B8%B2%E6%9F%93-vs-%E9%A2%84%E6%B8%B2%E6%9F%93-ssr-vs-prerendering。
我的建议是:实际项目直接Nuxt,省时省力。
感谢您的回复与建议
route里面配meta写好title
可以在created里面动态设置title,不需要第三方的插件来解决吧?
你是指nuxt还是vapper? 如果说是vapper,服务端和客户端共用created(),你指的动态设置title是用什么方式?