I blew two cowskins in an article a few days ago, screenshots to prove it:

It’s now a relief to say that both are implemented, but vue-Suspense is called vue-Async-Manager, which helps you manage the loading of asynchronous components and API calls in vUE applications. Suspense provides a component with the same name as React Suspense, Github:

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

The second one was inspired by the development of VUe-Async-Manager. I thought the same technique could be used in SSR prefetch data, but I didn’t try it at that time. I just had an idea, but luckily, I succeeded.

Github.com/HcySunYang/…

Vue-ssr -prefetcher provides a more intuitive and powerful data prefetch method for VUE SSR (only 1KB after compression). Let’s take a look at this comparison:

Vue-ssr – Prefetcher

Why?

There are two ways to do data prefetch in Vue server rendering, one is the asyncData scheme represented by NUxT/REAM, the other is the serverPrefetch component option provided by Vue native. However, both schemes have some disadvantages:

  • Nuxt/ream asyncData:

  • Can’t access this

  • Can only be used for routing components (or page components)

  • You need to expose the data to the rendering environment by returning objects (or promises)

  • Vue native serverPrefetch:

  • Only run on the server, the client needs to write another data acquisition logic, and avoid repeated data acquisition

  • Store data can only be prefetched, not exposed to a component-level rendering environment and sent to the client

The two schemes have a common drawback: Not intuitive (not intuitive, because it’s not the same way you write code for a SPA), VUE-SSR-Prefetcher provides a more intuitive way to prefetch data. In other words, you don’t see any SSR in the prefetch process, just like you would in a SPA application.

The installation

yarn add vue-ssr-prefetcher

Copy the code

Or use npm:

npm install vue-ssr-prefetcher --save

Copy the code

use

Vue-ssr – Prefetcher provides two VUE plug-ins: serverPlugin and clientPlugin, which are used for Server entry and Client entry respectively.

inserver entryIn:

import Vue from 'vue' import createApp from './createApp' // 1. ServerPlugin import {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. Done context. Rendered = serverPlugin.done // 4. App.$$selfStore is the serverPlugin State = {$$stroe: store? store.state : undefined, $$selfStore: app.$$selfStore } return app } function routerReady (router) { return new Promise(resolve => { router.onReady(resolve) })}Copy the code

ServerPlugin injects the app.$$selfStore property on the root component instance, which stores component-level data. You just need to add it to context.state. In addition, you need to set Context.Rendered to serverplugin.done.

inclient entryIn:

import Vue from 'vue' import createApp from './createApp' // 1. Import {clientPlugin} from 'vue-ssR-prefetcher' // 2. Use (clientPlugin) const {app, router, store} = createApp() router. OnReady (() => {// 3. $$selfStore const {$$selfStore} = window.__initial_state__ // 4. If ($$selfStore) app.$$selfStore = $$selfStore app.$mount('#app') // 5. $$resolved = true}).$$resolved = true}Copy the code

So let’s see how do we prefetch data

Once configured as described above, you can send a request for prefetch data in any component’s Created hook:

export default { name: 'Example', data() { return { name: 'Hcy'}}, async created() {// This.$createFetcher() function is injected by clientPlugin // accept a function that returns a promise as an argument, $createFetcher(fetchName) const res = await fetcher() this.name = res.name}}Copy the code

The only difference is that you need to call this.$createFetcher to create a fetcher, as shown in the code above. You may not like this, but this.

Vue.prototype.$createFetcher = function(fetcher) {
  const vm = this
  return function(params: any) {
    const p = fetcher(params)
    vm.$$promises.push(p)
    return p
  }
}


Copy the code

This is just a simple wrapper, so we can treat the fetcher created from this.$createFetcher as the same as the original function.

While it may look the same as when you were developing a SPA app, VuE-SSR-Prefetcher does a lot for you. Let’s compare and contrast the same image as before:

Of course vuE-SSR-Prefetcher also does this for you:

  • Avoid retrieving data repeatedly
  • The request should be able to be sent normally when the route jumps

You don’t need to do almost anything except createFetcher using this.$createFetcher, but there’s really nothing dark about that.

To work with vuEX, you just need to:

export default {
  name: 'Example',
  async created() {
    const fetcher = this.$createFetcher(() => this.$store.dispatch('someAction'))

    fetcher()
  }
}


Copy the code

It is also possible to mapActions to methods using mapActions.