vue.js 官网在先容 SSR 章节时的描述如下:
本指南将会非常深入,并且假设你已经熟习 Vue.js 本身,并且具有 Node.js 和 webpack 的相称不错的运用履历。
故很多uni-app开拓者在社区中呼吁DCloud官方供应更为简洁、开箱即用的 uni-app SSR方案。

uni-app团队近期在完成 vue 3.0 的全平台升级后,基于vue 3.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 中实行时抛出错误;数据提取:<uniCloud-db>组件天然支持SSR,无需调度代码,推举利用<uniCloud-db>查询数据库。如果你未利用<uniCloud-db>组件,则可利用serverPrefetch来实现做事器端数据获取,利用@dcloudio/uni-app供应的ssrRef或Vue.js官方的Vuex来实现状态同步;更多详细信息及示例代码,参考:https://uniapp.dcloud.net.cn/collocation/ssr
步骤二:编译发行
通过HBuilderX的发行菜单->网站 PC-Web或手机H5、勾选ssr、勾选将编译后的资源支配在uniCloud前端网页托管
这个过程,对开拓者来说很大略,只须要点击按钮即可,实际上HBuilderX在背后做了大量事情,包括:
编译uni-app项目,分别天生Server Bundle和Client Bundle将Client Bundle上传到uniCloud前端网页托管中将Server Bundle作为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/collocation/ssr