Shulou(Shulou.com)05/31 Report--

This article mainly introduces "how to use ssr in vue to achieve prefetching data". In daily operation, I believe many people have doubts about how to use ssr to achieve prefetching data in vue. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the question of "how to use ssr to achieve prefetching data in vue". Next, please follow the editor to study!

Why?

There are probably two ways to do data prefetching in Vue server rendering, one is the asyncData scheme represented by nuxt/ream, and the other is the serverPrefetch component option provided natively by Vue. However, both schemes have some drawbacks:

AsyncData of nuxt/ream:

Cannot access this

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

You need to expose the data to the rendering environment by returning an object (or promise)

ServerPrefetch provided natively by Vue:

It only runs on the server side, and the client needs to write additional data acquisition logic to avoid repeated data acquisition.

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

The above two schemes also have a common drawback: not intuitive (not intuitive, because it is different from the way you write code when developing SPA), vue-ssr-prefetcher provides a more intuitive data prefetching solution, in other words, you can't see any trace of SSR in the process of prefetching data, just like writing a SPA application.

Installation

Yarn add vue-ssr-prefetcher

Or use npm:

Npm install vue-ssr-prefetcher-save

Use

Vue-ssr-prefetcher provides two vue plug-ins, serverPlugin and clientPlugin, for server entry and client entry, respectively.

In server entry:

Import Vue from 'vue'import createApp from'. / createApp'// 1. Introduce serverPluginimport {serverPlugin} from 'vue-ssr-prefetcher'// 2. Install the plug-in Vue.use (serverPlugin) export default async context = > {const {app, router, store} = createApp () router.push (context.url) await routerReady (router) / / 3. Set context.rendered to serverPlugin.done context.rendered = serverPlugin.done / / 4. App.$$selfStore is the attribute injected by the serverPlugin plug-in context.state = {$stroe: store? Store.state: undefined, $$selfStore: app.$$selfStore} return app} function routerReady (router) {return new Promise (resolve = > {router.onReady (resolve)})}

ServerPlugin injects the app.$$selfStore attribute into the root component instance, storing component-level data, and you just need to add it to the context.state. In addition, you need to set context.rendered to serverPlugin.done.

In client entry:

Import Vue from 'vue'import createApp from'. / createApp'// 1. Introduce plug-in import {clientPlugin} from 'vue-ssr-prefetcher'// 2. Install the plug-in Vue.use (clientPlugin) const {app, router, store} = createApp () router.onReady () = > {/ / 3. Deconstruct $$selfStore const {$selfStore} = window.__INITIAL_STATE__ / / 4 from window.__INITIAL_STATE__. Add data to the component instance if ($selfStore) app.$$selfStore = $selfStore app.$mount ('# app') / / 5. This is very important, it is used to avoid repeatedly fetching data, and be sure to clientPlugin.$$resolved = true} after the $mount () function)

Let's see how to do data prefetching next.

Once configured as described above, you can send request prefetch data in the created hook of any component:

Export default {name: 'Example', data () {return {name:' Hcy'}}, the async created () {/ / this.$createFetcher () function is injected by clientPlugin / / receives a function that returns promise as an argument, for example, to request the api function const fetcher = this.$createFetcher (fetchName) const res = await fetcher () this.name = res.name}}

As shown in the above code, the only difference from the past is that you need to call the this.$createFetcher function to create a fetcher. You may feel uncomfortable about this, but in fact, what this.$createFetcher does is very simple. Here is its source code:

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

It's just a simple wrapper, so we can think of the fetcher created by the this.$createFetcher function as the same as the original function.

Although it looks no different from developing SPA applications, vue-ssr-prefetcher has done a lot for you, so let's compare it with the same picture as before:

Of course, vue-ssr-prefetcher also made it for you:

Avoid repeated acquisition of data

You should be able to send requests normally when the route is redirected

There's almost nothing you need to do, all you have to do is use the this.$createFetcher function to create a fetcher, but there really isn't any cool techs.

To work with vuex, you only need to:

Export default {name: 'Example', async created () {const fetcher = this.$createFetcher (() = > this.$store.dispatch (' someAction')) fetcher ()} at this point, the study on "how to use ssr to prefetch data in vue" is over. I hope you can solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.