从服务器获取数据延迟,服务器渲染 --- 数据预取和状态

webpack从零搭建

服务器渲染系列

数据预取和状态

在服务器端渲染(SSR)期间，如果应用程序依赖于一些异步数据，在开始渲染过程之前需要先预取和解析好这些数据。

在挂载 (mount) 到客户端应用程序之前，需要获取到与服务器端应用程序完全相同的数据 - 否则，客户端应用程序会因为使用与服务器端应用程序不同的状态，然后导致混合失败。

为了解决这个问题，获取的数据需要位于视图组件之外，即放置在专门的数据预取存储容器(data store)或"状态容器(state container)"中。

服务端数据预取

vuex/index.js

我们引入Vuex状态管理器来同步数据,具体怎么获取异步数据可以根据个人需要使用,只要能兼容客户端和服务端就行了,我们先利用定时器模拟请求.

// 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获取到部分路由信息的目的

// 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

因为服务器渲染也被称作首屏渲染,即我们应该只发送当前页面到客户端,同理我们也只该获取该页所需要的数据,所以我们将请求的发起点放在路由组件层级上

在组件暴露出一个自定义静态函数asyncData,因为该函数会在组件实例化之前调用,所以它无法访问this,但是我们可以传入route和store作参数获取需要的信息.

Page1

{{item.time}}

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]

}

}

};

page/view2.vue

同理可得

Page2

{{item.time}}

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]

}

}

};

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

跳转路由带参数

欢迎来到SSR渲染页面

view1

view2

export default {};

构建文件

运行命令

yarn build

yarn start

直接访问地址

http://localhost:3005/view1:1

可以看到现在界面上是已经拿到数据了,但是还有问题,如果我们点击view2的时候

服务端获取已经完成了,所以接下来我们要解决客户端数据获取的问题

客户端数据预取 (Client Data Fetching)

方式有两种

由导航之前解析数据

导航之前等所有数据解析完之后再传入数据渲染视图,缺点是如果过程处理比较久的话用户体验不好,常规操作是给个loading图缓解用户情绪.所以我们可以:

检查匹配组件

筛选差异路由组件

全局路由钩子执行asyncData 函数

挂载组件

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

Page1

{{item ? item.time : ''}}

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]

}

}

};

page/view2.vue

Page2

{{item ? item.time : ''}}

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]

}

}

};

重新运行代码可以发现正常运行,页面可以快速响应,然后会延迟一点切换数据

最终代码可以查看仓库Vue-ssr-demo/demo3