Prefetching data with Nuxt to improve loading time

Question

As far as I understand people are using server side rendering (ssr) to improve user experience and SEO with fast and content ready pages.

Recently I've started project with vue+nuxt in ssr mode. What I've noticed is that when I try to prefetch data in nuxtServerInit action I have to wait for the async call to finish before page could be served to me. As far as I know it will only hurt SEO and user experience.

export const actions = {
  async nuxtServerInit ({ commit }) {
    const response = await this.$axios.$get('games')
    commit('setGameList', response.data)
  }
}

Is there a way to actually prefetch data once and cache it for some period of time so that users would not be forced to wait?

Also what is the good usecase for nuxtServerInit? Cant understand the purpose of it..

@Aldarund, do you know what is the valid usecase for nuxtServerInit? — 31415926
It's for loading app wide data from server. The thing is that if you want cache for it you need to implement it yoursrlf in nuxtserverinit. ( Or use some cache module for axios ) — Aldarund
@Aldarund, what is "app wide data"? is data that defines routes of the website is a good example? I think so but for the crawler bot it will mean that the loading time increases, because webpage would not be served until request is finishes and nuxt renders.. which is bad, right? — 31415926

Juanmabs22 Juanmabs22 · Accepted Answer · 2019-02-01T22:49:27

Use The fetch Method

<template>
  <h1>Stars: {{ $store.state.stars }}</h1>
</template>

<script>
export default {
  async fetch ({ store, params }) {
    let { data } = await axios.get('http://my-api/stars')
    store.commit('setStars', data)
  }
}
</script>

Remember to use Vuex to work well!

UPDATE: How to share the fetch function

1 - Create a file with the function:

// defaultFetch.js
module.exports = async function defaultFetch({ store, params }){
  // Put some developer magic here to make the code works for you
  let { data } = await axios.get('http://my-api/stars');
  store.commit('setStars', data);
}

2 - Import and use in other components

// amazingComoponent1.vue
<template>
  <h1>Stars: {{ $store.state.stars }}</h1>
</template>

<script>
import defaultFetch from "../utils/defaultFetch";
export default {
  fetch: defaultFetch
}
</script>



// amazingComoponent2.vue
<template>
  <h1>Stars: {{ $store.state.stars }}</h1>
</template>

<script>
import fetch from "../utils/defaultFetch";
export default {
  fetch,
}
</script>

UPDATE 2: How to use and configure axios intance

Very easy, update the defaultFetch.js:

// defaultFetch.js

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

module.exports = async function defaultFetch({ store, params }){
  // Put some developer magic here to make the code works for you
  let { data } = await instance.get('http://my-api/stars');
  store.commit('setStars', data);
}

Hope helps :)

Prefetching data with Nuxt to improve loading time

1 Answers