使用Nuxt预取数据以提高加载时间

Question

据我所知，人们正在使用服务器端渲染（ssr）来提高用户体验，并通过快速和内容就绪的页面进行SEO。

最近我已经开始与vue nuxt项目在ssr模式。我注意到的是，当我试图在nuxtServerInit操作中预取数据时，我必须等待异步调用完成，然后页面才能提供给我。据我所知，这只会伤害搜索引擎优化和用户体验。

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

是否有一种方法可以将数据预取一次并缓存一段时间，这样用户就不会被迫等待？

还有什么是nuxtServerInit的好用例？不能理解它的目的...

Answer 1

使用fetch方法

<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>

记住要使用Vuex才能正常工作！

更新：如何共享fetch函数

1-创建具有以下功能的文件：

// 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-导入和在其他组件中使用

// 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>

更新2：如何使用和配置axios intance

很简单，更新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);
}

希望有帮助：）