vue-ssr-prefetcher
Making Vue SSR's data prefetching more intuitive.(Only 1kb
compressed)
Why?
The way to perform data prefetching in Vue's server-side rendering can be summarized as two types, one is the asyncData
scheme represented by nuxt/ream
, and the other is the serverPrefetch
component option provided by Vue. However, both options have some drawbacks:
nuxt/ream
'sasyncData
:- Can't access
this
- Can only be used for routing components (or
page
components) - Need to expose data to the rendering environment by returning an object(or
promise
)
- Can't access
ServerPrefetch
natively provided byVue
:- Can only run on the server side, the client needs to write additional logic to fetch data, and should avoid repeated data fetch.
- Can only prefetch
store
data, can't expose data to component-level rendering environment and send it to client
Both of the above options have a common drawback: Not intuitive, So vue-ssr-prefetcher
provides a more intuitive data prefetching scheme. In other words, you don't see any traces 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
Usage
vue-ssr-prefetcher
provides two vue
plugins: serverPlugin
and clientPlugin
for server entry
and client entry
respectively.
server entry
::
In // 1. Import plugin { // 2. Install plugin Vue const app router store = router await // 3. Set `context.rendered` to `serverPlugin.done` contextrendered = serverPlugindone contextstate = $$stroe: store ? storestate : undefined // 4. `app.$$selfStore` is a property injected by the serverPlugin $$selfStore: app$$selfStore return app} { return { router }}
serverPlugin
will inject the app.$$selfStore
property on the root component instance and store the component-level data. You just need to add it to context.state
. In addition, you also need to set context.rendered
to serverPlugin.done
.
client entry
:
In // 1. Import plugin// 2. Install pluginVue const app router store = router
Let's see how to do data prefetching next.
After the configuration is complete as described above, you can send the request to prefetch data in the created
hook of any component:
name: 'Example' { return name: 'Hcy' } async { // The `this.$createFetcher()` function is injected by clientPlugin, // it receives a function that returns a promise as a parameter, // such as the api function used to send the request const fetcher = this const res = await thisname = resname }
As shown in the code above, the only difference from the past is that you need to call the this.$createFetcher
function to create a fetcher
. In fact, this.$createFetcher
does things very simple. Here is the source code:
Vueprototype { const vm = this return { const p = vm$$promises return p }}
It's just a simple wrapper, so we can think of the fetcher
created by the this.$createFetcher
function as the original function.
Although it looks no different than developing the SPA
app, vue-ssr-prefetcher
does a lot for you, let's compare it:
Can access this |
used for any component | Used for both server and client | Prefetch component level data | |
---|---|---|---|---|
nuxt/ream 's asyncData |
❌ | ❌ | ✅ | ✅ |
ServerPrefetch provided by Vue |
✅ | ✅ | ❌ | ❌ |
vue-ssr-prefetcher |
✅ | ✅ | ✅ | ✅ |
Of course, vue-ssr-prefetcher
is also done for you:
- Avoid repeating data fetch
- Should be able to send requests normally when the route jumps
And you don't need to do anything. The only thing you need to do is create a fetcher
using this.$createFetcher
function, but this is really straightforward, no black technology.
In order to work with vuex, you only need to:
name: 'Example' async { const fetcher = this }
Author
vue-ssr-prefetcher © HcySunYang, Released under the MIT License.
Authored and maintained by HcySunYang.
homepage · GitHub @HcySunYang · Twitter @HcySunYang