[Nuxt3] Async data called twice

[benjamincanac]

When using useAsyncData, the http call is made on server and on client.

[benjamincanac]

nuxt/nuxt#13366

[Tahul]

nuxt/nuxt#13369

Can be tracked here now; I also added another a reproduction

[Atinux]

Related to vuejs/core#5513

[danielroe]

This should be fixed in latest Nuxt. However, you may notice that setup is still running twice (as this is caused by upstream bug) linked by @Atinux. If you encounter this, you can work around for now by enabling keepalive on the parent:

<script setup>
definePageMeta({
  keepalive: true
})
</script>

[benjamincanac]

@danielroe Just tried the latest version of nuxt, the useAsyncData is now called once for non-child page. I still have the second call on the client-side for all children.

[danielroe]

Yes, that would be the upstream bug. Have you tried with the workaround I mentioned? If it doesn't work, I can see if I can find another workaround for you.

[benjamincanac]

I did try to add the keepalive prop but it didn't change a thing, do I have to put it in all the parents all the way through app.vue?

[danielroe]

It only works in pages, and it only needs to be set in the parent page which has a child with setup() running twice. If that doesn't work, if you could point me to a reproduction, that would be helpful.

[benjamincanac]

Do you have nuxt.com running?

[danielroe]

I have access to the repo but it's not setup with env variables or backend.

[benjamincanac]

Would you rather have the full .env so you could run the API with docker or have a reproduction link with Stackblitz for example?

[danielroe]

I can reproduce the issue, but can resolve it with my workaround above.

I need to see why it's not working for Nuxt.com specifically.

If you can repro it not working in stackblitz even with my workaround, that would be ideal. Otherwise, the full .env would be perfect.

[benjamincanac]

An easier way would be to clone nuxt.com on your local, set the STRAPI_URL env variable to https://dev-api.nuxt.com and copy your cookie strapi_jwt from https://dev.nuxt.com to your http://localhost:3000.

[danielroe]

Sounds good 👍 How can I reproduce the issue then?

[benjamincanac]

Awesome! You can go to http://localhost:3000/@danielroe/projects and see that the /projects http call is made on client.