服務(wù)端渲染 Node 層直接獲取數(shù)據(jù)
在 Egg 項目如果使用模板引擎規(guī)范時通是過 render 方法進(jìn)行模板渲染,render 的第一個參數(shù)模板路徑,第二個參數(shù)時模板渲染數(shù)據(jù). 如如下調(diào)用方式:
async index(ctx) { // 獲取數(shù)據(jù),可以是從數(shù)據(jù)庫,后端 Http 接口 等形式 const list = ctx.service.article.getArtilceList(); // 對模板進(jìn)行渲染,這里的 index.js 是 vue 文件通過 Webpack 構(gòu)建的 JSBundle 文件 await ctx.render('index.js', { list });}
從上面的例子可以看出,這種使用方式是非常典型的也容易理解的模板渲染方式。在實際業(yè)務(wù)開發(fā)時,對于常規(guī)的頁面渲染也建議使用這種方式獲取數(shù)據(jù)沒,然后進(jìn)行頁面渲染。Node 獲取數(shù)據(jù)后,在 Vue 的根 Vue 文件里面就可以通過 this.list 的方式拿到 Node 獲取的數(shù)據(jù),然后就可以進(jìn)行 vue 模板文件數(shù)據(jù)綁定了。
在這里有個高階用法,可以直接把 ctx 等 Node 對象傳遞到 第二個參數(shù)里面, 這個時候你在模板里面就直接拿到 ctx 這些對象。 但這個時候就需要自己處理好 SSR 渲染時導(dǎo)致的 hydrate 問題,因為前端hydrate時并沒有 ctx 對象。
async index(ctx) { // 獲取數(shù)據(jù),可以是從數(shù)據(jù)庫,后端 Http 接口 等形式 const list = ctx.service.article.getArtilceList(); // 對模板進(jìn)行渲染,這里的 index.js 是 vue 文件通過 Webpack 構(gòu)建的 JSBundle 文件 await ctx.render('index.js', { ctx, list });}
服務(wù)端渲染 asyncData 方式獲取數(shù)據(jù)
在 Vue 單頁面 SSR 時涉及數(shù)據(jù)的請求方式,Node 層獲取數(shù)據(jù)方式可以繼續(xù)使用,但當(dāng)路由切換時(頁面直接刷新),Node 層就需要根據(jù)路由獲取不同頁面的數(shù)據(jù),同時還要考慮前端路由切換的情況,這個時候路由是不會走 Node 層路由,而是直接進(jìn)行的前端路由,這個時候也要考慮數(shù)據(jù)的請求方式。
基于以上使用的優(yōu)雅問題,這里提供一種 asyncData 獲取數(shù)據(jù)的方式解決單頁面 SSR 刷新不走 SSR 問題。 Node 不直接獲取數(shù)據(jù),獲取數(shù)據(jù)的代碼直接寫到前端代碼里面。這里需要解決如下兩個問題:
前端路由匹配 asyncData 調(diào)用
這里根據(jù)路由切換 url 獲取指定的路由 componet 組件,然后檢查是否有 aysncData,如果有就進(jìn)行調(diào)用。調(diào)用之后,數(shù)據(jù)會放到 Vuex 的 store 里面。
return new Promise((resolve, reject) => { router.onReady(() => { // url 為當(dāng)前請求路由,可以通過服務(wù)端傳遞到前端頁面 const matchedComponents = router.getMatchedComponents(url); if (!matchedComponents) { return reject({ code: '404' }); } return Promise.all( matchedComponents.map(component => { // 關(guān)鍵代碼 if (component.methods && component.methods.asyncData) { return component.methods.asyncData(store); } return null; }) ).then(() => { context.state = { ...store.state, ...context.state }; return resolve(new Vue(options)); }); }); });
Vue 模板定義 asyncData 方法
前端通過 Vuex 進(jìn)行數(shù)據(jù)管理,把數(shù)據(jù)統(tǒng)一放到 store 里面,前端通過 this.$store.state 方式可以獲取數(shù)據(jù),Node 和 前端都可以獲取到。
<script type="text/babel"> export default{ computed: { isLoading(){ return false; }, articleList() { return this.$store.state.articleList; } }, methods: { asyncData ({ state, dispatch, commit }) { return dispatch('FETCH_ARTICLE_LIST') } } }</script>
新聞熱點
疑難解答
圖片精選