Nuxt.js: Full-static payload gets mixed up using nested fetch() hooks inside dynamically loaded components

[FreekVR]

Version

v2.13.0

Reproduction link

https://codesandbox.io/s/cocky-glitter-t6w26?file=/components/Builder.vue:445-454

Steps to reproduce

• Create a page that uses its own fetch() hook
• Make that page use a wrapper/builder component which in turn uses dynamic component imports
• Make the components imported within the builder use their own fetch() hooks
• The data as displayed on the page (https://t6w26.sse.codesandbox.io/) will be offset by one (note this only occurs within the payload eg. after hydration happens! The data on the HTML/no-js version of the page is correct)

What is expected ?

Data is correctly mapped to each individual component

What is actually happening?

Data per component is offset by one - the first component incorrectly being empty and each component after that is using the incorrect payload

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

[sp0ken]

I think I have a similar issue.
I'm using a combination of dynamic routes and dynamic components and when the full static mode is activated the dynamic page does not load correctly (even though the payload is created and loaded by the browser).
Furthermore by loading another page and using the "back" functionality of the browser the dynamic page now loads correctly.
I've tried both asyncData and fetch with the same result.

Version

v2.13.2

Reproduction link

https://github.com/sp0ken/mini-repo

Steps to reproduce

Access the following link: https://clever-bartik-6ecbae.netlify.app/matelas-140x200 images and rating component are not properly loaded.
Access the normal page by clicking one of the header icons, everything is loading properly. Go back to the previous using the browser back button, the page now loads correctly.

What is expected ?

Components are correctly loaded

What is actually happening?

Components are not fully loaded and some are not even transformed (Cloudinary component is not correctly built onthe page)

[Agazeau]

Hello,

I'm having the same issue using a combination of dynamic routes and dynamic components, did you find any solution about it?

I'm very enthousiast about the full static mode but i'm now stopped in my development with this loading issue

Many thanks

[FreekVR]

As far as I've seen there's no way to resolve this. But I think running
"nuxt generate" instead of export will still emulate the old behavior
without payloads, which is more a workaround than a fix.

On Thu, 16 Jul 2020, 17:18 Axel, [e-mail] wrote:

Hello,

I'm having the same issue using a combination of dynamic routes and
dynamic components, did you find any solution about it?

I'm very enthousiast about the full static mode but i'm now stopped in my
development with this loading issue

Many thanks

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/nuxt/nuxt.js/issues/7563#issuecomment-659481016, or
unsubscribe
https://github.com/notifications/unsubscribe-auth/AADF5CF44IQVK32A7GGOL3DR34K3LANCNFSM4OCWML5A
.

[jonathanjameswatson]

I've had this issue too and it is stopping me from being able to develop a site.

In the reproduction, the \ component is given a payload, but this payload is not taken by the component and is given to the first of the dynamic components instead, offsetting the rest of the payloads by one. The reason that this happens is because the function that determines whether or not a payload is taken, isSsrHydration in packages/vue-app/template/mixins/fetch.client.js, returns true for the \ component even though it has a payload. I'm not sure what isSsrHydration is for but @Atinux, who wrote it, may.

The solution seems to either be to make isSsrHydration return false in this instance or not give the \ component a payload.

[FreekVR]

I also found this is sort-of an issue in Nuxt 2.12.

A setup where a component, which is loaded asynchronously (eg using await import()) also has a new-style fetch() function, it will call fetch() BOTH server-side and client-side again when hydrating.

If I change it to use a normal synchronous import, fetch() for the component is only called client side as it should.

Also note that this holds up if there is any parent for a component loaded using dynamic imports. The component which was calling fetch client-side where it wasn't needed in 2.12 itself was imported "normally", but it's parent was loaded dynamically by another component.

[sp0ken]

Quick update:

I've tested this issue with the newly released 2.14 version and it's still present.

[Atinux]

Hi,

I will look at this, I know we have a big limitation with fetch and Vue 2 serverPrefetch that may lead to this issue since we cannot create a unique ID for each component, and it is problematic when having async components on client-side changing the order (they are waterfall on SSR).

Assigning to myself this issue and looking at it ASAP, but this may be really fixed in Nuxt 3 / Vue 3 combo.

[drewbaker]

@Atinux what did you find out with this? Fetch not returning the correct (or any) payload has meant we can’t really use fetch for anything useful.