I'm using the async fetch hook to render the component in SSR and making the API call inside the same. But on the live server, it is actually loading one more time on the client-side and making one more call to API and as API isn't exposed during client-side so data just washes away and the array object gets again set to empty.
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,
I want to persist this randomData variable, so there shouldn't be another call on the client-side to populate the same.
If you want to pass some data from the server-side into the client-side, you could use the nuxtServerInit Vuex action
/store/index.js
actions: {
nuxtServerInit ({ commit }, { req }) {
if (req.session.user) {
commit('user', req.session.user)
}
}
}
So, the issue was that, as I was Docker and the API was only exposed to the server-side and not the client-side. For a blink, the content was available and then just all gone. Because the async fetch and asyncData hooks are called on the server and as well as on the client-side. I solved it using the Vuex store. Now I started storing the data fetched on the server in store and using the same on the client-side. Here is how I implemented that:
// 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,