Asyncdata and fetch called twice in nested route

[husayt]

Version

v2.0.0

Reproduction

https://codesandbox.io/s/k0rj8844nv

Steps to reproduce

let's say I have the following structure:

pages\user\_id.vue
pages\user\_id\_name.vue

Note , in one _id is a file, in the other is folder

What is expected ?

only pages\user\_id\_name.vue should be rendered.

What is actually happening?

when I go to page /user/12/john
then I see asyncdata being called twice.

pages_user__id.js:xxx
pages_user__id__name.js:xxx

seems like both pages being rendered. Asyncdata is called on both, although created and mounted called once

Additional comments?

This might explain many other asyncdata multiple call issues

_{This bug report is available on Nuxt community (#c7867)}

[manniL]

@husayt Could you add a CodeSandBox for reproduction?

[Fubinator]

I was just playing around with that:
https://codesandbox.io/s/xl312qo8ow

If you browse to /user/12/john it shows the page for the _id.vue-file and asyncData gets called for both pages.

[manniL]

Thanks @Fubinator! We will look into it ☺️

[manniL]

Same goes for fetch.

[husayt]

Thanks @Fubinator , you did codesandbox, before I could come in

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

[generalworksinc]

I found (maybe) same case on v2.3.4.
I avoided this problem that I moved 'computed' variable in component to 'method'.

[msacar]

is also called multiple times in this structure
example sandbox : https://codesandbox.io/embed/w04l29nmm7
pages/
--| _category/
-----| _subCategory/
--------| _id.vue
--------| index.vue
-----| _subCategory.vue
-----| index.vue
--| _category.vue
--| index.vue

[MR-zhou-xx]

hello, What can be expected to solve this problem?

[msacar]

Hello you can use custom routes to solve this problem.

in nuxt.config.js file

 router: {
    extendRoutes(routes, resolve) {
      routes.push({
        name: 'category',
        path: '/:category',
        component: resolve(__dirname, 'pages/category/category.vue')
      })
      routes.push({
        name: 'category-city',
        path: '/:category/:city',
        component: resolve(__dirname, 'pages/category/category.vue')
      })
    }
  },

[dimassrio]

Hi @manniL , I also can confirm this bug happen in our production site. (SSR)

But there was also some undefined behavior that we noticed.

The code that we use in our fetch method is look like this,

async fetch({ store, params }) {
    await store.dispatch('episode/fetchItemBySlug', params.slug)
    await store.dispatch('episode/fetchArticlesLatestBySlug', params.slug) // latest
    await store.dispatch('episode/fetchArticlesPopularBySlug', params.slug) // popular
}

We want to refactor so that we can fetch latest and popular into the browser part of the site.

When I remove the two last line of code, somehow the second fetch will returning params.slug as 'undefined'. This in return will break the server side of the code. And the second fetch is also happening randomly, there is no consistency of the occurrences. The only consistency that I get is that when the three await line is intact, the params.slug will not return undefined.

There might be some connection with the store part, since that definitely get reset the when the second fetch is happening. And second fetch not happening when I have two of those three await line intact.

My pages structure is look like this :

--| pages
----| episode
------| _slug

and custom routes solution (above) didn't fix it.

[dimassrio]

Got update, change my store action code into proper async await and return it properly will make the second fetch not happening.

[AndrewBogdanovTSS]

@dimassrio could you share a code example of what exactly help you resolve an issue?
I use regular async fetch like

async fetch({store, params, query}) {
console.log('params.slug:', params.slug)
}

where is params.slug gives me undefined during SSR phase than it's called the second time on the client

[denisrpriebe]

Can confirm this is still an issue in v2.10.0. "Returning" any axios calls directly from methods seems to help a bit, but additional "undefined" calls are still being made.

[denisrpriebe]

UPDATE: I was able to fix this issue entirely by turning off my global event bus in a beforeDestroy() hook.

beforeDestroy() {
    this.$bus.$off()
},

Not sure how the two are related but give this a shot if you have components that are listening for global events and are making AJAX calls as a result of those events. I setup my global event bus per this article: https://binbytes.com/blog/create-global-event-bus-in-nuxtjs

[AndrewBogdanovTSS]

I don't use any event bus but still have this issue

[aliparsa]

same here
any updates ?
my problem exist with keep-alive and when disable it the fetch run one time but i need keep-alive :-/

[tomhatzer]

I do have the same problems now with the async fetch() method on 2.12.2. Everything inside the fetch method is called twice, basically like the fetch method is being called two times in a row, directly after each other.

I'm not using keep-alive in my pages at all and there's only one instance of nested routes, but the effects are also showing for the non-nested route pages.

My structure is like:

pages/
    - catalogue/
        - _slug.vue
        - index.vue
    - catalogue.vue
    - faq.vue
    - upcoming.vue

It happens on every page that has the async fetch() method inside of it, so for all of my pages.

Example code:

export default {
  name: 'Faq',
  async fetch () {
    console.log('fetch')
  }
}

Result from console:

Even with that basic version without anything else inside the component, it's being called twice.
This makes working with nuxt.js and vuex stores impossible using the fetch method as it will cause reloading of the store and flickering of the whole page when having multiple properties that are being loaded from the store (and reset before loading).

[AndrewBogdanovTSS]

@tomhatzer the fact that you have fetch method called twice in 2.12.2 is expected behavior. If you upgraded to this version you basically opt in into a new fetch logic. You can read more about it in this articles:
https://nuxtjs.org/blog/understanding-how-fetch-works-in-nuxt-2-12
https://nuxtjs.org/blog/build-dev-to-clone-with-nuxt-new-fetch

[nupamore]

No solution was successful. I wrote this code, ignore it by taking advantage of the fact that it goes through middleware.

// middleware.js
export default async function({ req, redirect }) {
    if (req && req.url.match('undefined')) 
        redirect('/')
}

[xerosanyam]

I had a dash - in one of the store property & that caused fetch getting called twice. Very weird
removing it solved it.

@nupamore @tomhatzer do you also have a dash in any store property?

[ddlaat]

I solved it by removing code outside such a block:

<div v-if="$fetchState.pending">
</div>
<div v-else>
</div>

I had a notification above the $fetchState.pending which called a function on my component which caused my fetch to be called twice.

[1000ch]

I'm not sure this is same as this issue, but following is what I debug:

• version: 2.14.0
• mode: universal
• command: nuxt-ts build && nuxt-ts start

This happens on server process (Node.js).

// .nuxt/dist/server/server.js
var server = __webpack_exports__["default"] = (async ssrContext => { ... });

1. It works when I access to the URL that includes dynamic route like test/_testId for the first time since starting local server.
   • the above code is called once
2. It does not work when I access to the URL as same as above second time.
   • the above code is called twice
   • the context of the first time is expected, it works correctly
   • the context of the second time seems to be broken (in my case, missing _testId because it is 'undefined')

Tried to detect what causes this behavior, but I could not reach the caller of this function correctly.

[giusecapo]

Hi! Any solutions for this? I literally can't code this way. Dev mode crashes because of this double fetch and undefined issue...

[tomhatzer]

@giusecapo sorry, not from my side. I stopped using nuxt because I wasn‘t able to get any solution or workaround for this and switched back to plain html with a little bit of js sugar on top. 😕

[giusecapo]

@tomhatzer sorry to hear that, so frustrating... I've happily used Vue (no framework) for a while and loved it. Seems Nuxt is not ready for big projects... too many bugs!

[danielroe]

Note: Looking through this thread, the initial issue was likely caused by the fact that the structure 'turns on' nested routes (docs). The idea is that a parent route is meant to contain <NuxtChild> which then renders a child route - and so on. Because each page in this nested route is intended to be displayed on the screen at the same time, it makes sense that multiple asyncDatas are being called. (Note #5590 for some history.)

Possible solutions:

1. Check your .nuxt/routes.json to see the generated routes. You should be able to see whether there are child/nested routes being generated by Nuxt.
2. If you spot that child/nested routes are enabled, then try disabling them by renaming your files (so they aren't named the same as a directory with other pages).
3. (Alternatively) you can use the https://github.com/nuxt-community/router-extras-module/ to take more control - and https://github.com/nuxt-community/router-module to take complete control - of your routing.

If none of that works for you (and this may well be true for a number of people in the thread), then it's likely a different issue and I'd really appreciate a new issue + code reproduction for your particular use-case so we can track & solve it separately.

[mshahbazi]

I've developed a dozen of applications using Nuxt. Of course it's been mature enough for production, at least for me.

[CavalcanteLeo]

not only asyncData, but mounted, created and so on

[danielroe]

In line with my earlier comment (#4008 (comment)), I'm going to close this issue. But if you are encountering a situation that falls outside of my 3 scenarios (as I envision is true for some of the responses here), please do create a new issue (with reproduction) and feel free to tag me in it 😉

[stouch]

I noticed that this problem is because of the layout. My fetch or created method renders for each layoutName ...

[CavalcanteLeo]

What about the layout was wrong? @stouch

[AndrewBogdanovTSS]

Found out the cause of the issue in my specific case. Since we are using Cloudflare which does its internal HTML optimizations such as minification - that led to the difference in SSR vs VDOM version which in turn was invalidating SSR and was creating full rehydration of the page so fetch that was called on the server had to be recalled again for each component but now on the client - that was creating a huge drop in performance since we basically were doubling all page requests on initial loading. Once HTML modification was disabled it went back to normal.

[stouch]

What about the layout was wrong? @stouch

#5703 (comment) fixed our problem, I'm not sure why but it did solve the problem (double rendering of created/mounted/fetch for no reason).

[CavalcanteLeo]

wooow, i will try it @stouch

[jayolin]

If anyone is still having this issue, check to see that custom components used in the parent route are imported and included in the "components" object. This fixed the problem for me

[m-emre-yalcin]

if you got an error like this:
vue.runtime.esm.js?2b0e:619 [Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <body>. Bailing hydration and performing full client-side render.

it might be the reason for fetching twice. IDK the source problem but encapsulating the <nuxt-child> and some fetching components with <client-only> worked for me.

[kchjxxgh]

I think it's really easy to reproduce it without .
I don't know why close this thread?

[JesseMaxwell]

This is still a problem.

[danielroe]

@JesseMaxwell See my previous comment: #4008 (comment)