Question

据我所知，人们正在使用服务器端呈现（ssr）来改善用户体验和具有快速且内容就绪页面的SEO。

最近我以ssr模式使用vue + nuxt开始了项目。我注意到的是，当我尝试在nuxtServerInit操作中预取数据时，我必须等待异步调用完成才能将页面提供给我。据我所知，这只会损害SEO和用户体验。

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

是否有一种方法可以实际预取一次数据并将其缓存一段时间，以免用户被迫等待？

nuxtServerInit的好用例是什么？不能理解它的目的。

Answer 1

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

请记住要使用Vuex正常工作！

更新：如何共享获取功能

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

很容易，更新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);
}

希望有帮助：）

使用Nuxt预取数据以缩短加载时间

1 个答案: