Variable data is not persisted on client-side when using async fetch in Nuxt and data doesn't persist

Question

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.

So, you're using ssr: true and target: 'server', right? Also, what is your end goal? Not having the request on the client side, only on the server? Because, the default behavior of an universal app, is to hydrate the content once you're on the client-side, hence triggering any hook a second time. Something like this? — kissu
– kissu, Commented Apr 27, 2022 at 10:51
@kissu SSR is true and the target is set to server. My main goal is that the component doesn't create another request to API when on the client. It should be using the randomData variable that is populated on the server. But that randomData variable is [ ] just after a blink on the client. — Nik
– Nik, Commented Apr 27, 2022 at 11:08
Yeah, because you reset the value with randomData: [] on your client-side. If you want to get some data on the server and pass it directly to your client, you could use nuxtServerInit Vuex action. More details in the lifecycle. — kissu
– kissu, Commented Apr 27, 2022 at 11:12
@kissu So, this is the only way or there is more methods to persist the variable? — Nik
– Nik, Commented Apr 27, 2022 at 12:39
There are not a lot of ways to persist data across the server and client side and in this case, it's probably the best approach. What's wrong with that? — kissu
– kissu, Commented Apr 27, 2022 at 12:53

kissu · Accepted Answer · 2022-04-28 14:37:42Z

1

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

answered Apr 28, 2022 at 14:37

kissu

47.3k16 gold badges94 silver badges196 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nik · Accepted Answer · 2022-04-28 14:38:47Z

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,

Collectives™ on Stack Overflow

Variable data is not persisted on client-side when using async fetch in Nuxt and data doesn't persist

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related