Estoy usando el gancho de async fetch para representar el componente en SSR y hacer la llamada a la API dentro del mismo. Pero en el servidor en vivo, en realidad se está cargando una vez más en el lado del cliente y haciendo una llamada más a la API y como la API no está expuesta durante el lado del cliente, los datos simplemente desaparecen y el objeto de la matriz vuelve a estar vacío. .
data() { return { errored: false, randomData: [], }; }, async fetch() { await this.$axios .get(this.routeUrl) .then((res) => { if (res.data.length == 0 || res.status != 200) this.errored = true; this.randomData = res.data; }) .catch((err) => { console.log(err); }); }, fetchOnServer: true,Quiero conservar esta variable randomData, por lo que no debería haber otra llamada en el lado del cliente para completar la misma.
Si desea pasar algunos datos del lado del servidor al lado del cliente, puede usar la nuxtServerInit Vuex action
/store/index.js
actions: { nuxtServerInit ({ commit }, { req }) { if (req.session.user) { commit('user', req.session.user) } } }Entonces, el problema era que, como yo era Docker y la API solo estaba expuesta del lado del servidor y no del lado del cliente. Por un instante, el contenido estuvo disponible y luego desapareció. Porque los ganchos async fetch y asyncData se llaman en el servidor y también en el lado del cliente. Lo resolví usando la tienda Vuex . Ahora comencé a almacenar los datos obtenidos en el servidor en la tienda y a usarlos en el lado del cliente. Así es como lo implementé:
// store/index.js export const state = () => ({ randomData: [], }); export const mutations = { SET_RANDOMDATA: (state, payload) => { state.randomData = payload; }, }; // Inside the component // Fetch the data from API on server-side async fetch() { if (process.server) { await this.$axios .get(this.routeUrl) .then((res) => { this.$store.commit("SET_RANDOMDATA", res.data); }) .catch((err) => { console.log(err); }); } }, computed: { ...mapState(["randomData"]), }, fetchOnServer: true,