首页 > 开发 > Javascript > 正文

更强大的vue ssr实现预取数据的方式

2020-02-25 00:56:22
字体:
来源:转载
供稿:网友

我在前几天的一篇文章中吹了两个牛皮,截图为证:

现在可以松口气的说,这两个牛皮都实现了,不过 vue-suspense 改名了,叫做 vue-async-manager 了,他能帮你管理 Vue 应用中的异步组件的加载和 API 的调用,提供了与 React Suspense 同名的 `<Suspense>` 组件,Github:

shuidi-fed/vue-async-manager ​ github.com

第二个牛皮是在开发 vue-async-manager 的过程中临时产生的一个灵感,觉得相同的技巧可以用在 SSR 预取数据上,但是当时还没有尝试,只是有个想法而已,不过很幸运,我成功了,GitHub:

https://github.com/HcySunYang/vue-ssr-prefetcher ​ github.com

vue-ssr-prefetcher 为 VueSSR 提供更直观更强大的数据预取方式(压缩后仅 1kb )。让我们来看看这张对比图:

接下来详细介绍一下 vue-ssr-prefetcher:

Why?

Vue 的服务端渲染中做数据预取的方式大概可以总结为两种,一种是以 nuxt/ream 为代表的 asyncData 方案,另一种是 Vue 原生提供的 serverPrefetch 组件选项。然而这两种方案都有一些缺点:

nuxt/reamasyncData

不能访问 this 只能用于路由组件(或 page 组件) 需要通过返回对象(或 promise)将数据暴露到渲染环境

Vue 原生提供的 serverPrefetch

只运行于服务端,客户端需要另外编写数据获取逻辑,并避免数据的重复获取 只能预取 store 数据,无法将数据暴露到组件级别的渲染环境并发送到客户端

以上两种方案还拥有一个共同的弊端: 不够直观 (不直观,因为这与开发 SPA 时编写代码的方式不同), vue-ssr-prefetcher 提供了一种更直观的数据预取方案,换句话说你在预取数据的过程中看不出来任何 SSR 的痕迹,就想在编写 SPA 应用一样。

安装

yarn add vue-ssr-prefetcher

Or use npm :

npm install vue-ssr-prefetcher --save

使用

vue-ssr-prefetcher 提供了两个 vue 插件: serverPluginclientPlugin ,分别用于 server entryclient entry

server entry 中:

import Vue from 'vue'import createApp from './createApp'// 1. 引入 serverPluginimport { serverPlugin } from 'vue-ssr-prefetcher'// 2. 安装插件Vue.use(serverPlugin)export default async context => { const { app, router, store } = createApp() router.push(context.url) await routerReady(router) // 3. 设置 context.rendered 为 serverPlugin.done context.rendered = serverPlugin.done // 4. app.$$selfStore 是 serverPlugin 插件注入的属性 context.state = {  $$stroe: store ? store.state : undefined,  $$selfStore: app.$$selfStore } return app}function routerReady (router) { return new Promise(resolve => {  router.onReady(resolve) })}            
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表