服務器渲染 --- 數據預取和狀態

時間  2019-11-10
標籤 服務器 渲染 數據 狀態 简体版
原文   原文鏈接

webpack從零搭建

webpack4從零開始構建(一)
webpack4+React16項目構建(二)
webpack4功能配置劃分細化(三)
webpack4引入Ant Design和Typescript(四)
webpack4代碼去重,簡化信息和構建優化(五)
webpack4配置Vue版腳手架(六)vue

服務器渲染系列

服務器渲染 --- Vue+Koa從零搭建成功輸出頁面
服務器渲染 --- 數據預取和狀態webpack

數據預取和狀態

在服務器端渲染(SSR)期間，若是應用程序依賴於一些異步數據，在開始渲染過程以前須要先預取和解析好這些數據。git

在掛載 (mount) 到客戶端應用程序以前，須要獲取到與服務器端應用程序徹底相同的數據 - 不然，客戶端應用程序會由於使用與服務器端應用程序不一樣的狀態，而後致使混合失敗。github

爲了解決這個問題，獲取的數據須要位於視圖組件以外，即放置在專門的數據預取存儲容器(data store)或"狀態容器(state container)"中。web

服務端數據預取

vuex/index.js

咱們引入Vuex狀態管理器來同步數據,具體怎麼獲取異步數據能夠根據我的須要使用,只要能兼容客戶端和服務端就好了,咱們先利用定時器模擬請求.vue-router

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export function createStore () {
  return new Vuex.Store({
    state: {
      items: {}
    },
    actions: {
      fetchItem ({ commit }, id) {
        // 假定咱們有一個能夠返回 Promise 的
        // 通用 API（請忽略此 API 具體實現細節）
        // `store.dispatch()` 會返回 Promise，
        // 以便咱們可以知道數據在什麼時候更新
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve({ name: 123 })
          }, 500)
        }).then((item) => {
          commit('setItem', { id, item })
        })
      }
    },
    mutations: {
      setItem (state, { id, item }) {
        Vue.set(state.items, id, item)
      }
    }
  })
}

src/app.js

引入vuex配置文件,同時使用vuex-router-sync同步路由狀態,達到能夠從store獲取到部分路由信息的目的vuex

// app.js
import Vue from 'vue'
// Sync vue-router's current $route as part of vuex store's state.
import { sync } from 'vuex-router-sync'
import App from './App.vue'
import createRouter from './router'
import createStore from './vuex'

export default function createApp () {
  // 建立 router 實例
  const router = createRouter()
  const store = createStore()

  // 同步路由狀態(route state)到 store
  sync(store, router)

  const app = new Vue({
    // 注入 router 到根 Vue 實例
    router,
    store,
    render: (h) => h(App)
  })

  // 返回 app 和 router
  return { app, router, store }
}

page/view1.vue

由於服務器渲染也被稱做首屏渲染,即咱們應該只發送當前頁面到客戶端,同理咱們也只該獲取該頁所須要的數據,因此咱們將請求的發起點放在路由組件層級上segmentfault

在組件暴露出一個自定義靜態函數asyncData,由於該函數會在組件實例化以前調用,因此它沒法訪問this,可是咱們能夠傳入route和store做參數獲取須要的信息.後端

<template>
  <div>
    <p>Page1</p>
    <p>{{item.time}}</p>
  </div>
</template>

<script>
export default {
  asyncData({ store, route }) {
    // 觸發 action 後，會返回 Promise
    return store.dispatch('fetchItem', route.params.id)
  },
  computed: {
    // 從 store 的 state 對象中的獲取 item。
    item() {
      return this.$store.state.items[this.$route.params.id]
    }
  }
};
</script>

page/view2.vue

同理可得數組

<template>
  <div>
    <p>Page2</p>
    <p>{{item.time}}</p>
  </div>
</template>

<script>
export default {
  asyncData({ store, route }) {
    // 觸發 action 後，會返回 Promise
    return store.dispatch('fetchItem', route.params.id)
  },
  computed: {
    // 從 store 的 state 對象中的獲取 item。
    item() {
      return this.$store.state.items[this.$route.params.id]
    }
  }
};
</script>

entry/entry-server.js

服務器獲取匹配路由的邏輯就在這裏,因此咱們一樣在獲取到匹配路由以後調用靜態函數進行獲取

由於這是不定時的異步操做,因此須要經過Promise.all保證達到全部匹配組件都成功調用才進行下一步的效果,記得要加上捕獲錯誤操做.

這樣能夠保證在完成數據預取完成以後再填充到store進行渲染

import createApp from '../src/app'

export default (context) => {
  // 由於有可能會是異步路由鉤子函數或組件,因此咱們將返回一個 Promise,
  // 以便服務器可以等待全部的內容在渲染前,
  // 就已經準備就緒.
  return new Promise((resolve, reject) => {
    const { app, router, store } = createApp()

    // 設置服務器端 router 的位置
    router.push(context.url)

    // 等到 router 將可能的異步組件和鉤子函數解析完
    router.onReady(() => {
      const matchedComponents = router.getMatchedComponents()

      // 匹配不到的路由,執行 reject 函數,並返回 404
      if (!matchedComponents.length) {
        return reject({ code: 404 })
      }

      // 對全部匹配的路由組件調用 `asyncData()`
      Promise.all(
        matchedComponents.map((Component) => {
          if (Component.asyncData) {
            return Component.asyncData({
              store,
              route: router.currentRoute
            })
          }
        })
      )
        .then(() => {
          // 在全部預取鉤子(preFetch hook) resolve 後，
          // 咱們的 store 如今已經填充入渲染應用程序所需的狀態。
          // 當咱們將狀態附加到上下文，
          // 而且 `template` 選項用於 renderer 時，
          // 狀態將自動序列化爲 `window.__INITIAL_STATE__`，並注入 HTML。
          context.state = store.state

          // Promise 應該 resolve 應用程序實例,以便它能夠渲染
          resolve(app)
        })
        .catch(reject)
    }, reject)
  })
}

createBundleRenderer會將附加在上下文數據自動序列化爲 window.__INITIAL_STATE__，並注入 HTML

entry/entry-client.js

服務器渲染已經將store序列化以後賦值到頁面的window.__INITIAL_STATE__字段裏,而後咱們在客戶端渲染前已經可以獲取到而後再調用replaceState將客戶端的store直接覆蓋達到先後端共享狀態的目的.

import createApp from '../src/app'

const { app, router, store } = createApp()

// 掛載數據
if (window.__INITIAL_STATE__) {
  // 替換 store 的根狀態，僅用狀態合併或時光旅行調試。
  store.replaceState(window.__INITIAL_STATE__)
}

// 路由完成初始導航時調用
router.onReady(() => {
  // 掛載App.vue模板中根元素
  app.$mount('#app')
})

router/index.js

同步改一下路由配置獲取id

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default function createRouter () {
  return new Router({
    // 要記得增長mode屬性，由於#後面的內容不會發送至服務器，服務器不知道請求的是哪個路由
    mode: 'history',
    routes: [
      {
        // 首頁
        alias: '/',
        path: '/view1:id',
        component: () => import('../page/view1.vue')
      },
      {
        path: '/view2:id',
        component: () => import('../page/view2.vue')
      }
    ]
  })
}

src/App.vue

跳轉路由帶參數

<template>
  <div id="app">
    <h2>歡迎來到SSR渲染頁面</h2>
    <router-link to="/view1:1">view1</router-link>
    <router-link to="/view2:2">view2</router-link>
    <router-view></router-view>
  </div>
</template>
<script>
export default {};
</script>

構建文件

運行命令

yarn build
yarn start

直接訪問地址

http://localhost:3005/view1:1

圖片描述

能夠看到如今界面上是已經拿到數據了,可是還有問題,若是咱們點擊view2的時候

圖片描述

服務端獲取已經完成了,因此接下來咱們要解決客戶端數據獲取的問題

客戶端數據預取 (Client Data Fetching)

方式有兩種

由導航以前解析數據

導航以前等全部數據解析完以後再傳入數據渲染視圖,缺點是若是過程處理比較久的話用戶體驗很差,常規操做是給個loading圖緩解用戶情緒.因此咱們能夠:

  1. 檢查匹配組件
  2. 篩選差別路由組件
  3. 全局路由鉤子執行asyncData 函數
  4. 掛載組件
import createApp from '../src/app'

const { app, router, store } = createApp()

// 掛載數據
if (window.__INITIAL_STATE__) {
  // 替換 store 的根狀態，僅用狀態合併或時光旅行調試。
  store.replaceState(window.__INITIAL_STATE__)
}

// 路由完成初始導航時調用
router.onReady(() => {
  // 添加路由鉤子函數，用於處理 asyncData.
  // 在初始路由 resolve 後執行，
  // 以便咱們不會二次預取(double-fetch)已有的數據。
  // 使用 `router.beforeResolve()`，以便確保全部異步組件都 resolve。
  router.beforeResolve((to, from, next) => {
    // 返回目標位置或是當前路由匹配的組件數組 (是數組的定義/構造類，不是實例)。一般在服務端渲染的數據預加載時使用。
    const matched = router.getMatchedComponents(to)
    const prevMatched = router.getMatchedComponents(from)

    // 咱們只關心非預渲染的組件
    // 因此咱們對比它們，找出兩個匹配列表的差別組件
    let diffed = false
    const activated = matched.filter((component, index) => {
      return diffed || (diffed = prevMatched[index] !== component)
    })

    if (!activated.length) {
      return next()
    }
    // 這裏若是有加載指示器 (loading indicator)，就觸發
    Promise.all(
      activated.map((component) => {
        if (component.asyncData) {
          return component.asyncData({ store, route: to })
        }
      })
    )
      .then(() => {
        // 中止加載指示器(loading indicator)
        next()
      })
      .catch(next)
  })

  // 掛載App.vue模板中根元素
  app.$mount('#app')
})

從新運行代碼能夠發現正常運行,由於在前面設置定時器500毫秒,全部會有明顯的卡頓感.
最終代碼能夠查看倉庫Vue-ssr-demo/demo2

匹配視圖後再獲取數據

將客戶端數據預取邏輯放在視圖組件的 beforeMount 函數中。當路由導航被觸發時，能夠當即切換視圖，所以應用程序具備更快的響應速度。然而，傳入視圖在渲染時不會有完整的可用數據。所以，對於使用此策略的每一個視圖組件，都須要具備條件加載狀態。

說白了就是跟普通調用同樣須要有個默認狀態渲染視圖,獲取到數據以後再次渲染界面

咱們能夠利用beforeMount生命週期,該生命週期已經完成初始化data和el數據,編譯模板等,可是還沒掛載到BOM節點,雖然沒法直接訪問組件當前實例,可是能夠經過this.$options訪問自定義屬性

page/view1.vue

<template>
  <div>
    <p>Page1</p>
    <p>{{item ? item.time : ''}}</p>
  </div>
</template>

<script>
export default {
  asyncData({ store, route }) {
    // 觸發 action 後，會返回 Promise
    return store.dispatch('fetchItem', route.params.id)
  },
  beforeMount() {
    if (this.$options.asyncData) {
      // 將獲取數據操做分配給 promise
      // 以便在組件中，咱們能夠在數據準備就緒後
      // 經過運行 `this.dataPromise.then(...)` 來執行其餘任務
      this.$options.asyncData({
        store: this.$store,
        route: this.$route
      })
    }
  },
  computed: {
    // 從 store 的 state 對象中的獲取 item。
    item() {
      return this.$store.state.items[this.$route.params.id]
    }
  }
};
</script>

page/view2.vue

<template>
  <div>
    <p>Page2</p>
    <p>{{item ? item.time : ''}}</p>
  </div>
</template>

<script>
export default {
  asyncData({ store, route }) {
    // 觸發 action 後，會返回 Promise
    return store.dispatch('fetchItem', route.params.id)
  },
  beforeMount() {
    if (this.$options.asyncData) {
      // 將獲取數據操做分配給 promise
      // 以便在組件中，咱們能夠在數據準備就緒後
      // 經過運行 `this.dataPromise.then(...)` 來執行其餘任務
      this.$options.asyncData({
        store: this.$store,
        route: this.$route
      })
    }
  },
  computed: {
    // 從 store 的 state 對象中的獲取 item。
    item() {
      return this.$store.state.items[this.$route.params.id]
    }
  }
};
</script>

從新運行代碼能夠發現正常運行,頁面能夠快速響應,而後會延遲一點切換數據
最終代碼能夠查看倉庫Vue-ssr-demo/demo3

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程