uni-app 團隊近期在完成 Vue 3.0 的全平臺升級后，基于 Vue 3.0 + uniCloud，發布了開箱即用的 SSR 支持，官方稱其為 uniCloud 版的 SSR。

據介紹，SSR(服務端渲染)可以給 SPA 站點帶來兩大核心優勢：

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

下面是一個 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. 數據預取：組件天然支持SSR，無需調整代碼，推薦使用查詢數據庫。如果你未使用組件，則可使用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開發部署工作結束。

最后看看傳統 SSR 與 uniCloud 版 SSR 的優缺點對比：

SSR" _fcksavedurl="https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Funiapp.dcloud.io%2Fcollocation%2FSSR">點此查閱關于 uni-app SSR 方案的更多介紹。

本文轉自OSCHINA

本文標題：uni-app 提供開箱即用的 SSR 支持

本文地址：https://www.oschina.net/news/162061/unicloud-SSR