关于前端:uniapp提供开箱即用的SSR支持

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…