SSR（服务端渲染）能够给SPA站点带来两大外围劣势：

  • 更好的SEO
  • 更快的首屏渲染

很多uni-app开发者都在踊跃尝试SSR，但大多没入门就放弃了，起因在于SSR颇高的技术门槛。

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做了深度集成，你能够依照如下步骤疾速上手：

步骤一：调整代码适配服务端运行环境

  1. 生命周期：uni-app的生命周期钩子函数中，页面onLoad、组件beforeCreate 和 created 会在服务器端渲染 (SSR) 过程中被调用，你须要查看原我的项目代码中获取数据的机会；
  2. 特定平台API：若间接应用了如 window 或 document，这类仅浏览器反对的全局变量，则会在云端 Node.js 中执行时抛出谬误；
  3. 数据提取：<uniCloud-db>组件人造反对SSR，无需调整代码，举荐应用<uniCloud-db>查询数据库。如果你未应用<uniCloud-db>组件，则可应用serverPrefetch来实现服务器端数据获取,应用@dcloudio/uni-app提供的ssrRef或Vue.js官网的Vuex来实现状态同步；

更多详细信息及示例代码，参考：https://uniapp.dcloud.net.cn/...

步骤二：编译发行

通过HBuilderX的发行菜单->网站 PC-Web或手机H5、勾选ssr、勾选将编译后的资源部署在uniCloud前端网页托管

这个过程，对开发者来说很简略，只须要点击按钮即可，实际上HBuilderX在背地做了大量工作，包含：

  1. 编译uni-app我的项目，别离生成Server Bundle和Client Bundle
  2. 将Client Bundle上传到uniCloud前端网页托管中
  3. 将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/coll...