[UNIVERSAL MODE] Nuxtjs fetches 2x on async created

ram231
0
ram231
commented a month ago

Version

v2.10.2

Reproduction link

https://github.com/ram231/INFORM.ED

Steps to reproduce

I'm using strapi for API prototyping. then I found out that whenever I reload the page, the logger prints 2 HTTP methods per request, if I'm navigating to other routes, it only fetches 1 request.

async beforeCreate(){
    try {
     // using @nuxt/axios plugin.
     await this.$axios.get('url') // dummy url. but you get the point.
    } catch (error) {
      console.log(error)
    }
}

What is expected ?

Single requests
[2019-11-01T14:51:20.019Z] debug GET \API(68 ms) 200

What is actually happening?

2 Request on loading the page(SSR + CSR).
[2019-11-01T14:51:20.019Z] debug GET \API(68 ms) 200
[2019-11-01T14:51:21.486Z] debug GET \API(17 ms) 200

Additional comments?

Although, using asyncData will only fetch the data once. putting in to other methods(such as created/mounted/beforeMount/beforeCreate) will have 2 requests instead of 1

bug
0
pi0
32.8k
pi0
commented a month ago

Hi. You have to use either fetch or asyncData. If you want to fetch data only on client side, then mounted hook. Don't use created or beforeCreate for data fetching and async operations.

0
ram231
0
ram231
commented a month ago

Thanks. If I want to fetch data that is not in the page component. I'll be likely to use mounted instead of other methods.

0
Informations
Bug Report โ€ข Open
#c9975 - Created a month ago