Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

useAsyncData and useFetch run twice if page uses layout

See original GitHub issue

Environment

------------------------------
- Operating System: `Darwin`
- Node Version:     `v17.4.0`
- Nuxt Version:     `3.0.0-27408103.b243891`
- Package Manager:  `npm@8.3.1`
- Bundler:          `Vite`
- User Config:      `-`
- Runtime Modules:  `-`
- Build Modules:    `-`
------------------------------

Reproduction

https://github.com/lukaszflorczak/nuxt3-demo/tree/test/fetch (branch test/fetch).

Run the / page and check console logs
Go to index.vue and set layout: false in definePageMeta()
Refresh the page

Describe the bug

Today I noticed that useAsyncData and useFetch run requests twice – both server and client-side. I tested it in component and page.

During my investigation, I found, that the problem exists only if the page uses a layout.

Probably it’s related to https://github.com/nuxt/framework/pull/3011

Issue Analytics

State:
Created 2 years ago
Reactions:14
Comments:35 (14 by maintainers)

Top GitHub Comments

3reactions

danielroecommented, Feb 27, 2022

@Baiyuetribe The problem does not seem to be with Nuxt but with Suspense, which is why I linked my comment above, and why this is labelled upstream.

This issue exists, at the moment, to track the resolution of the issue within vuejs/core or vue-router.

If you spot an issue with the way layouts or pages are implemented in Nuxt, of course I would be very glad to hear that.

2reactions

nathanchasecommented, Jul 16, 2022

@nathanchase would you create a new issue with a reproduction? 🙏

It appears to be pinia at fault. If I delete pinia from my modules in nuxt.config, useFetch/$fetch no longer loads data twice.

I’m using “@pinia/nuxt”: “^0.3.0”, and “pinia”: “^2.0.16”.

Will try to create a barebones repro.

Top Results From Across the Web

Nuxt3 doesn't fetch new data after client-side navigation : r/Nuxt

I want to have a page which lists blog posts and when you click on a ... Or use useAsyncData() and supply a...

Vue / Nuxt.js - APIs being called twice in created hook

I notice that mounted() only runs on client side so I am learning towards utilizing that hook. I did however notice that I...

Nuxt 3 | Data fetching | useAsyncData | useFetch - YouTube

Hi all,Thanks a lot guys for voting in the poll that I ran last week. It was super helpful.As per the majority, here...

Adding an API and database to your Nuxt App with Prisma

Prisma runs on the server-side. If you're using Nuxt, you can run Prisma in the asyncData and fetch hooks at either a page...

Data Fetching · Get Started with Nuxt

Nuxt provides useFetch, useLazyFetch, useAsyncData and useLazyAsyncData to handle data ... Within your pages, components and plugins you can use useFetch to ...