nuxt generate static mode calls asyncData and gets payload undefined error 404 page

[gabrielsze]

Hi all, this issue is similar to #9252 and #9425. I've experienced similar behaviors with some interesting findings to I thought to highlight them here, in some hopes of finding people with similar issues. (Edit) Also seems to be related to accent marks as well in #9297.

From my understanding, once a static site is generated in nuxt, there shouldn't be any calls to asyncData on the client side. This works for most of my pages with routes that are dynamically generated, until I noticed some recently making calls to asyncData which results in a 404 error page (since payload is undefined). I narrowed down a few instances on this - one is because of some whitespace in the route URL generated, so

• /pages/test1 doesn't call asyncData on client and works fine
• /pages/test 1 calls asyncData on client and fails

Also, I noticed #9425 and recently had an issue with mandarin URLs generated - I'm not able to localize the behavior for this one because I have some mandarin URLs that consistently work, but ran into the same error (of calling asyncData on client side) and threw an error 404 page as well.

Versions

• nuxt: 2.14.12
• node: 12.16.1

Reproduction

• my repo is huge so I may take quite awhile to try to reproduce this behavior, but I'm documenting some findings here and check if people face similar issues

Steps to reproduce

• Nuxt generate static mode
• Pass payload data to page
• Navigate to page with nuxt-link or $this.route.push

What is Expected?

• asyncData shouldn't be called since nuxt generate handles the payload so that the data is already loaded on the server-side.

What is actually happening?

• asyncData is triggered for some selected routes/pages, throwing an error 404 page since payload inside asyncData is undefined.

[gabrielsze]

Hi @danielroe, i believe i have a simple reproduction here. I've implemented a simple generating of pages based on reading a json file, and generating manually refer to nuxt.config.js (as per my setup) and passing a payload via the generate config.

https://github.com/gabrielsze/nuxtStaticTest

Expected Behavior:
Running the npm run generate command should result in ssr/static mode, and on running nuxt serve no asyncData calls should be made on client side.

Seen behavior:
After generating the pages, in home page, selecting brand names such as Peperoni and Hafudog works well. However, clicking onto brand pages with spaces in them such as "King of Snacks" or "Mixed Grill & Greens" triggers asyncData calls in the console log. A fully static page as such shouldn't be calling asyncData yeah.

[RomeroGaliza]

Similar to #9474

[danielroe]

Should be resolved in #9494 - could you check nuxt-edge and let me know if that's not the case in your project?

[gabrielsze]

hey @danielroe, thanks for looking into this. so far I've tested multiple situations (as highlighted above), and they seem to work. Looking at the PR, it seems to have handled these edge cases (accent marks, not ascii etc). Works good for me now on nuxt-edge": "^2.16.0-27087855.aa5d05f8