服务器渲染 --- 数据预取和状态

时间  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教程