Error message here!

Hide Error message here!

忘记密码?

Error message here!

请输入正确邮箱

Hide Error message here!

密码丢失?请输入您的电子邮件地址。您将收到一个重设密码链接。

Error message here!

返回登录

Close

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

DCloud 2021-09-27 14:18:42 阅读数:40 评论数:0 点赞数:0 收藏数:0

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請求所得。

img

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前端網頁托管

img

這個過程,對開發者來說很簡單,只需要點擊按鈕即可,實際上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缺,實現優大於缺。具體對比如下:

img

歡迎大家使用uniCloud版SSR!

更多介紹詳見:https://uniapp.dcloud.io/coll...

版权声明
本文为[DCloud]所创,转载请带上原文链接,感谢

编程之旅,人生之路,不止于编程,还有诗和远方。
阅代码原理,看框架知识,学企业实践;
赏诗词,读日记,踏人生之路,观世界之行;

支付宝红包,每日可领