当前位置: 首页 > Web前端 > HTML5

uni-app提供开箱即用的SSR支持

时间:2023-04-05 16:01:40 HTML5

SSR(服务器端渲染)可以为SPA站点带来两大核心优势:更好的SEO和更快的首屏渲染很多uni-app开发者都在积极尝试SSR,但是大部分人没有上手就放弃了,因为SSR技术门槛高。vue.js官网对SSR章节的描述如下:这篇攻略会很深入,假设你已经熟悉Vue.js本身,并且对Node.js和webpack有相当不错的应用体验。因此,很多单应用开发者在社区呼吁DCloud提供更简洁、开箱即用的单应用SSR方案。uni-app团队近期完成vue3.0全平台升级后,基于vue3.0+uniCloud,发布开箱即用的SSR支持,我们称之为uniCloud版SSR。这是一个uniCloud版本的SSR例子:news.dcloud.io是一个基于uni-app&uniCloud开发的新闻系统。通过查看元素,会发现新闻列表数据包含在服务器下发的源代码中,而不是来自客户端的Ajax请求。uniCloud版本的SSR实现起来比较简单,已经和HBuilderX深度集成。您可以按照以下步骤快速上手:第一步:调整代码以适应服务端运行环境的生命周期:在uni-app的生命周期钩子函数中,页面onLoad、组件beforeCreate和created服务端渲染(SSR)过程中调用,需要在原项目代码中查看获取数据的时机;特定平台API:如果直接使用window或document等,该类型只有浏览器全局变量支持,在云端Node.js执行会报错;数据提取:组件天然支持SSR,无需调整代码,推荐使用查询数据库。如果不使用组件,可以使用serverPrefetch实现服务端数据获取,使用@dcloudio/uni-app提供的ssrRef或者Vue.js官方Vuex实现状态同步;更多细节和示例代码,参考:https://uniapp.dcloud.net.cn/...第二步:编译发布通过HBuilderX的发布菜单->网站PC-Web或手机H5,勾选ssr,勾选编译后的资源部署托管在uniCloud上的前端网页的过程对于开发者来说非常简单,只需要点击按钮即可。其实HBuilderX在幕后做了很多工作,包括:编译uni-app工程,分别生成ServerBundle和ClientBundle。上传ClientBundle到uniCloud前端虚拟主机,使用ServerBundle作为uni-ssr云函数资源,编译上传到uniCloud服务空间第三步:配置uni-ssr云函数的URL路径和绑定uni-ssr云函数自定义域名,然后在浏览器中访问该域名,就可以得到服务端渲染的页面。至此,uniCloud版SSR的开发部署就结束了。是不是比以前简单多了?总结一下Vue.js官网和社区的众多文档。介绍SSR的时候会提到,SSR是一把双刃剑,优点和缺点都很明显(2优点3缺点,缺点大于优点)。而HBuilderX&uniCloud支持的SSR完美解决了SSR的一些不足,由短变好,变成4好1短,实现利大于弊。具体对比如下:欢迎使用uniCloud版SSR!更多详情请见:https://uniapp.dcloud.io/coll...