Nuxt.js: [2.14] Generate: Conflict between store and fetched payloads causing empty pages

[FreekVR]

In nuxt 2.13, but 2.14 also, it appears some store patterns will cause the payloads not to be correctly loaded when visiting some routes after hydrating a statically generated site into an SPA.

A parent component sets a category based on the slug, it then fetches some async data in the store for re-use in the SPA (eg. some category data from an api). Said parent component has a destroyed() hook to make sure that, when navigating away, the current active item is unset.

A child component, only loaded after $fetchState.pending === false, uses mapGetters to get the correct category data from the store, then fetches some articles belonging to the active category.

The resulting page(s) are working in SSR (nuxt dev) and the HTML is generated (nuxt generate) correctly.

Testing with nuxt generate and nuxt start yields the following issue however:
A hard load on the generated page works. But clicking a nuxt-link to navigate to an alternative category will result in an empty page.

I should note that Nuxt version 2.12.2 did not have any issues with the generated version of this page.

Versions

• nuxt: 2.14.0 (likely also in 2.13)
• node: 10.23

Reproduction

https://github.com/FreekVR/nuxt-static-repro
https://boring-swanson-0859c4.netlify.app/magazine

Steps to reproduce

Ran: yarn run nuxt generate && yarn run nuxt start

Navigate to /magazine/foo or magazine/bar, then click one or both of the links on the page. They should return empty content in the SPA.

What is Expected?

Server- and client side render the same output

What is actually happening?

Via SPA, briefly the correct content is visible, then disappears

[xrei]

Personally, for my project fetch() hook is completely broken. Every api call is made on that hook i get an error TypeError: Cannot read property 'toLowerCase' of undefined. With or without vuex, doesn't matter. Had to use middleware() but it's dissapointing.

[papertokyo]

I am also seeing this same issue.

• nuxt v2.14.0
• target is static
• all component data is being loaded/set in fetch()
• pages are generated properly (with fetched data) and look as expected on initial load
• client-side navigation fetches payload (which contains fetched data) but renders page without data

[f3ltron]

• nuxt v2.14.0
• target: static
• mode: universal
• app generate with npx create-nuxt-app

The payload are not well generate it's like the version of the payload cache it's not the same after when generate / start.

I got everytime 404 on payload.

And locally i have the same behavior as @FreekVR.

It's hard to get where the error is. Should we try with nuxt 2.13 ?

[daltonrooney]

Thanks @FreekVR for the issue reproduction. I just wanted to confirm that I'm experiencing the same issue. @f3ltron Same issue with 2.13, also with Nuxt Edge 2.15

[divine]

Is this somehow related to this issue https://github.com/nuxt/nuxt.js/issues/7717 ?

[FreekVR]

I think my issues were due to my reliance on certain business logic running in fetch(). When nuxt uses the new payload.js-files, neither fetch() nor asyncData() is called. I'll close this now as this is just an oversight on my part, though it's not very clearly documented in the change notes.

However, I /am/ still running into #7799 which is related.

[papertokyo]

@FreekVR can you provide some detail on how you made it work? I would assume that, even if fetch() isn't called, the data object gets 'rehydrated' from the payload. In my case, I can see the fetched data in the payload file...it just doesn't get rendered in the app.

[daltonrooney]

@papertokyo I was experiencing this exact issue - it turns out it was related to an obscure markup error in an unrelated component. So ymmv, but try simplifying your template to only the component you’re troubleshooting and see if that helps.

[Zielgestalt]

I had this error only on iOS Safari. In my case it was a phone number in my footer component Safari tried to convert into a clickable link. that broke the page (only client-side). Turning the number into a link manually fixed the problem.

[eertmanhidde]

I think I had the same issue where the generated site wouldn't return any content client-side but would server-side. I also was using fetch() to get my data. Tried changing it to asyncData() and for me, this was the solution.

[FrancoisDuprat]

Exactly the same issue for me :/

• nuxt v2.14.7
• target is static
• all pages data is being loaded/set in fetch()
• pages are generated properly (with fetched data) and look as expected on initial load
• client-side navigation fetches payload (which contains fetched data) but renders page without data

But to be very accurate I have this issue only when I manually refresh the homepage "/" and then I navigate on another folder "/articles". If I refresh the "/articles" folder manually then I navigate on the homepage "/" and then on the folder page "/articles" it works !..