建站
咨詢
售后
建站咨詢
新聞中心
uni-app 團(tuán)隊(duì)近期在完成 Vue 3.0 的全平臺(tái)升級(jí)后，基于 Vue 3.0 + uniCloud，發(fā)布了開箱即用的 SSR 支持，官方稱其為 uniCloud 版的 SSR。
“專業(yè)、務(wù)實(shí)、高效、創(chuàng)新、把客戶的事當(dāng)成自己的事”是我們每一個(gè)人一直以來堅(jiān)持追求的企業(yè)文化。 創(chuàng)新互聯(lián)建站是您可以信賴的網(wǎng)站建設(shè)服務(wù)商、專業(yè)的互聯(lián)網(wǎng)服務(wù)提供商! 專注于網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、軟件開發(fā)、設(shè)計(jì)服務(wù)業(yè)務(wù)。我們始終堅(jiān)持以客戶需求為導(dǎo)向，結(jié)合用戶體驗(yàn)與視覺傳達(dá)，提供有針對(duì)性的項(xiàng)目解決方案，提供專業(yè)性的建議，創(chuàng)新互聯(lián)建站將不斷地超越自我，追逐市場(chǎng)，引領(lǐng)市場(chǎng)！
據(jù)介紹，SSR(服務(wù)端渲染)可以給 SPA 站點(diǎn)帶來兩大核心優(yōu)勢(shì)：
- 更好的 SEO
- 更快的首屏渲染
下面是一個(gè) uniCloud 版的 SSR 示例：news.dcloud.io 是基于 uni-app & uniCloud 開發(fā)的新聞系統(tǒng)。通過審查元素會(huì)發(fā)現(xiàn)，新聞列表數(shù)據(jù)包含在服務(wù)端下發(fā)的源碼中，而不是客戶端 Ajax 請(qǐng)求所得。
uniCloud 版的 SSR 實(shí)現(xiàn)的較為簡(jiǎn)單，且和 HBuilderX 做了深度集成，可以按照如下步驟快速上手：
步驟一：調(diào)整代碼適配服務(wù)端運(yùn)行環(huán)境
- 生命周期：uni-app的生命周期鉤子函數(shù)中，頁(yè)面onLoad、組件beforeCreate 和 created 會(huì)在服務(wù)器端渲染 (SSR) 過程中被調(diào)用，你需要檢查原項(xiàng)目代碼中獲取數(shù)據(jù)的時(shí)機(jī);
- 特定平臺(tái)API：若直接使用了如 window 或 document，這類僅瀏覽器支持的全局變量，則會(huì)在云端 Node.js 中執(zhí)行時(shí)拋出錯(cuò)誤;
- 數(shù)據(jù)預(yù)?。航M件天然支持SSR，無需調(diào)整代碼，推薦使用查詢數(shù)據(jù)庫(kù)。如果你未使用組件，則可使用serverPrefetch來實(shí)現(xiàn)服務(wù)器端數(shù)據(jù)獲取,使用@dcloudio/uni-app提供的SSRRef或Vue.js官方的Vuex來實(shí)現(xiàn)狀態(tài)同步;
更多詳細(xì)信息及示例代碼，參考：https://uniapp.dcloud.net.cn/collocation/SSR
步驟二：編譯發(fā)行
通過HBuilderX的發(fā)行菜單->網(wǎng)站 PC-Web或手機(jī)H5、勾選SSR、勾選將編譯后的資源部署在uniCloud前端網(wǎng)頁(yè)托管
這個(gè)過程，對(duì)開發(fā)者來說很簡(jiǎn)單，只需要點(diǎn)擊按鈕即可，實(shí)際上HBuilderX在背后做了大量工作，包括：
- 編譯uni-app項(xiàng)目，分別生成Server Bundle和Client Bundle
- 將Client Bundle上傳到uniCloud前端網(wǎng)頁(yè)托管中
- 將Server Bundle作為uni-SSR云函數(shù)資源，編譯并上傳到uniCloud服務(wù)空間
步驟三：配置 uni-SSR 云函數(shù)的 URL 化路徑
給uni-SSR云函數(shù)綁定自定義域名，然后在瀏覽器中訪問該域名，就可以獲得服務(wù)端渲染的頁(yè)面了。
至此，uniCloud版SSR開發(fā)部署工作結(jié)束。
最后看看傳統(tǒng) SSR 與 uniCloud 版 SSR 的優(yōu)缺點(diǎn)對(duì)比：
SSR" _fcksavedurl="https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Funiapp.dcloud.io%2Fcollocation%2FSSR">點(diǎn)此查閱關(guān)于 uni-app SSR 方案的更多介紹。
本文轉(zhuǎn)自O(shè)SCHINA
本文標(biāo)題：uni-app 提供開箱即用的 SSR 支持
本文地址：https://www.oschina.net/news/162061/unicloud-SSR
網(wǎng)頁(yè)題目：uni-app提供開箱即用的SSR支持
文章轉(zhuǎn)載：http://www.5511xx.com/article/cddpjse.html
