Egg Vue SSR 服務端渲染數據請求與asyncData

服務端渲染Node層直接獲取數據

在Egg項目如果使用模板引擎規範時通是過render方法進行模板渲染，render的第一個參數模板路徑，第二個參數時模板渲染數據.如如下調用方式：

從上面的例子可以看出，這種使用方式是非常典型的也容易理解的模板渲染方式。在實際業務開發時，對於常規的頁面渲染也建議使用這種方式獲取數據沒，然後進行頁面渲染。Node獲取數據後，在Vue的根Vue文件裡面就可以通過this.list的方式拿到Node獲取的數據，然後就可以進行vue模板文件數據綁定了。

在這裡有個高階用法，可以直接把ctx等Node對象傳遞到第二個參數裡面,這個時候你在模板裡面就直接拿到ctx這些對象。但這個時候就需要自己處理好SSR渲染時導致的hydrate問題，因為前端hydrate時並沒有ctx對象。

服務端渲染asyncData方式獲取數據

在Vue單頁面SSR時涉及數據的請求方式，Node層獲取數據方式可以繼續使用，但當路由切換時(頁面直接刷新)，Node層就需要根據路由獲取不同頁面的數據，同時還要考慮前端路由切換的情況，這個時候路由是不會走Node層路由，而是直接進行的前端路由，這個時候也要考慮數據的請求方式。

基於以上使用的優雅問題，這裡提供一種asyncData獲取數據的方式解決單頁面SSR刷新不走SSR問題。Node不直接獲取數據，獲取數據的代碼直接寫到前端代碼裡面。這裡需要解決如下兩個問題：

前端路由匹配asyncData調用

這裡根據路由切換url獲取指定的路由componet組件，然後檢查是否有aysncData，如果有就進行調用。調用之後，數據會放到Vuex的store裡面。

Vue模板定義asyncData方法

前端通過Vuex進行數據管理，把數據統一放到store裡面，前端通過this.$store.state方式可以獲取數據，Node和前端都可以獲取到。

前端asyncData數據統一調用

在服務端asyncData調用時，可以解決單頁面SSR刷新問題，那直接在前端切換路由時因不走服務端路由，那數據如何處理？

在Vue單頁面實現時，通常都會使用Vue-Router，這個時候可以藉助Vue-Router提供afterEach鉤子進行統一數據請求，可以直接調用Vue模板定義的asyncData方法。代碼如下：

最後貼上可以用的完整代碼，請根據實際需要進行修改,實際可運行例子見https://github.com/easy-team/egg-vue-webpack-boilerplate/tree/feature/green/spa

Vue頁面初始化統一封裝

頁面入口代碼

前端router/store定義

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持小編。