-
-
Notifications
You must be signed in to change notification settings - Fork 4.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Asyncdata and fetch called twice in nested route #4008
Comments
@husayt Could you add a CodeSandBox for reproduction? |
I was just playing around with that: If you browse to |
Thanks @Fubinator! We will look into it |
Same goes for fetch. |
Thanks @Fubinator , you did codesandbox, before I could come in |
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. |
I found (maybe) same case on v2.3.4. |
is also called multiple times in this structure |
hello, What can be expected to solve this problem? |
Hello you can use custom routes to solve this problem. in nuxt.config.js file
|
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,
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 and custom routes solution (above) didn't fix it. |
Got update, change my store action code into proper async await and return it properly will make the second fetch not happening. |
@dimassrio could you share a code example of what exactly help you resolve an issue?
where is params.slug gives me undefined during SSR phase than it's called the second time on the client |
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. |
UPDATE: I was able to fix this issue entirely by turning off my global event bus in a beforeDestroy() hook.
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 |
I don't use any event bus but still have this issue |
This comment has been minimized.
This comment has been minimized.
same here |
I do have the same problems now with the I'm not using My structure is like:
It happens on every page that has the Example code:
Even with that basic version without anything else inside the component, it's being called twice. |
@tomhatzer the fact that you have |
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('/')
} |
I had a dash @nupamore @tomhatzer do you also have a dash in any store property? |
I solved it by removing code outside such a block:
I had a notification above the |
I'm not sure this is same as this issue, but following is what I debug:
This happens on server process (Node.js). // .nuxt/dist/server/server.js
var server = __webpack_exports__["default"] = (async ssrContext => { ... });
Tried to detect what causes this behavior, but I could not reach the caller of this function correctly. |
Hi! Any solutions for this? I literally can't code this way. Dev mode crashes because of this double fetch and undefined issue... |
@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. 😕 |
@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! |
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 Possible solutions:
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. |
I've developed a dozen of applications using Nuxt. Of course it's been mature enough for production, at least for me. |
not only asyncData, but mounted, created and so on |
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 😉 |
I noticed that this problem is because of the layout. My fetch or created method renders for each layoutName ... |
What about the layout was wrong? @stouch |
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. |
#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). |
wooow, i will try it @stouch |
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 |
if you got an error like this: it might be the reason for fetching twice. IDK the source problem but encapsulating the |
I think it's really easy to reproduce it without . |
This is still a problem. |
@JesseMaxwell See my previous comment: #4008 (comment) |
Version
v2.0.0
Reproduction
https://codesandbox.io/s/k0rj8844nv
Steps to reproduce
let's say I have the following structure:
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.
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
The text was updated successfully, but these errors were encountered: