Nuxt.js fetch on page reload

Question

When using nuxt.js fetch(), whenever I reload the page, it does not fetch it again. Only if I come from a router-link. How do I force it to actually refetch from my API?

export default {
    async fetch() {
        const data = await this.$axios.$get(`/users/${this.$route.params.name}`)
        this.user = data
    },
    data() {
        return {
            user: []
        }
    }
}

Every page I look at, they always show placeholders on page refresh, WHILE refetching from their APIs, why does my Nuxt.js app not do that when refreshing? It is just not refetching the data from my API, which is weird.

score 3 · Answer 1 · answered Apr 18 '21 at 16:01

3

Just ran into the same issue.

After browsing the options section of the Nuxt docs on fetch, it looks like setting the fetchOnServer option to false triggers the fetch hook on both the client-side and when the page reloads (server side), solving the issue:

fetchOnServer: false

answered Apr 18 '21 at 16:01

Tom Ray

41
6

1

Ok, but does this not blow away SSR ? – Kalnode Mar 12 '22 at 14:37

score 2 · Answer 2 · answered Aug 25 '20 at 22:41

I believe, in Nuxt.JS, the fetch method is only called on rendering from router navigation - a manual reload would not trigger this.

Perhaps you could construct a mixin using beforeMount() instead of fetch() and apply this to the pages where this was required.

Or of course, just on the page itself:

async beforeMount() {
    const data = await this.$axios.$get(`/users/${this.$route.params.name}`)
    this.user = data
},

https://nuxtjs.org/blog/understanding-how-fetch-works-in-nuxt-2-12/

What is the point of using fetch at all then? – Marian Klühspies Apr 02 '21 at 07:43 — Marian Klühspies, Apr 02 '21 at 07:43

score 0 · Answer 3 · answered Aug 23 '21 at 15:48

0

Seems no viable solution for reload issue when doing Nuxt static site. An option for me is calling fetch in mounted hook if data wasn't not loaded in fetch hook:

  mounted() {
     if (!this.loaded) this.$fetch()
  },

Fetch as a method

answered Aug 23 '21 at 15:48

wael32gh

324
5
11

what's wrong with setting `fetchOnServer: false`? – dvdrtrgn Aug 23 '21 at 16:24
Yes it's another possibility but will lose static site generation advantage using it as it will tell Nuxt app to use client side only – wael32gh Aug 23 '21 at 19:03
what is `this.loaded` ? – panji gemilang Dec 21 '21 at 00:28
@panjigemilang Boolean flag to tell weather the resource has been loaded or not – wael32gh Dec 21 '21 at 14:29
is it initiated in `data()` ? wouldn't it be always `false` if I set it to `false`? why didn't I just call the `$fetch()` instead? – panji gemilang Dec 21 '21 at 14:46

Nuxt.js fetch on page reload

3 Answers3