Hydration recalls fetch() of components which are directly used in v-for

[Fabioni]

Versions

• nuxt: v2.15.18
• node: v16.14.0

Reproduction

<vue-component :prop="42" v-for="obj in objs" :key="obj.id"></vue-component>

the vue-component is a normal vue components with a async fetch() {await some seconds} method, that sets some data for the components which is used in the template. For better visualization of the problem, in the template show $fetchState.pending.

Steps to reproduce

Use nuxt generate and nuxt start and load the page.

What is Expected?

All components should reuse the correctly saved fetch data and should not rerun the async fetch function, thus you should not see the $fetchState.pending.

What is actually happening?

When loading the page, you will see all the server-rendered components as it should be and also in the source-file, you will see the saved fetch data for all vue-components. This is correct.

BUT: waiting a few seconds (for the hydration), you will see that $fetchState.pending becomes true for all components, but the first one, thus all but one async fetch functions are rerun, which is not the expected behavior.

Workaround

use instead:

<div v-for="obj in objs" :key="obj.id">
  <vue-component :prop="42"></vue-component>
</div>

This works correctly. But it is just a workaround and can't be the answer, since sometimes the other way would be more logical, and the bug is just not expected or documented behavior.

Cheers :-)

[cainaf]

hey man, I had this problem for so long bothering me, never finding an answer

never tought of a v-for being the issue, thanks for your report! it helped at least one soul =)