Nuxt.js: Use new fetch() hook with component cache cause hydration error

[cron13]

Version

v2.12.2

Reproduction link

https://codesandbox.io/s/modest-blackwell-uvtxt

Steps to reproduce

go to https://codesandbox.io/s/modest-blackwell-uvtxt and refresh browser

What is expected ?

cache works properly

What is actually happening?

got error Mismatching childNodes vs. VNodes

Additional comments?

I am trying to get data in a component using a new fetch() hook.
The DOM of the component is cached normally, but the data received with fetch() does not put into the cache, hence there is a problem with hydration

[aaronransley]

Running into the same issue. Using @nuxtjs/component-cache module along with serverCacheKey method on a given component causes client-side hydration errors.

The SSR appears to run fine and returned source is correctly cached, but client-side hydration considers the markup out of sync and forces a re-run of the fetch method, thus invalidating the purpose of the caching.

[cron13]

As far as I was able to deal with the problem - the problem is not related to nuxt. vuejs just does not cache the state of variables, I don’t think that it can be easily fixed, at least you need to fix vuejs code, but not nuxt
It would be cool to create components that are fully cached, for example, for a news site that has a lot of news blocks. Could flush the cache when the news is updated, but so far it is not possible

[aaronransley]

@cron13 Did you implement any workarounds for this issue? I'm playing around with the serverPrefetch method provided by Vue at this point, but it feels like stumbling in the dark.

[cron13]

No, it seems to that it is impossible to implement a simple hack, Need to edit the vuejs library

[cron13]

The guys from vuejs said that this is not a bug, they are advised to write to them to discord or stackoverfow :-(

[stale[bot]]

Thanks for your contribution to Nuxt.js!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as pending will not be automatically marked as stale.