Nuxt•13mo ago

pages with usefetch causes browser tab crash on fast (back/forward) actions

as the title says
pages with usefetch causes browser tab to crash on fast (back/forward) actions.
If the user goes back/forth very fast (approximately 4 times and more ) quickly the browser tab will crash....
this is only happening with pages that have usefetch.

I tried to disable SSR rendering mode, but same issue.

Any idea on how to fix that ?

kapa.ai•12/16/24, 12:14 AM

Hi @Artist201. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

kapa.ai•12/16/24, 12:14 AM

----------------------
Based on the knowledge sources provided, there are a few potential issues and solutions related to your problem with useFetch causing browser tab crashes on fast navigation actions. Here's what I can gather:

Breaking change in Nuxt 3.7.1:There was a breaking change reported when updating from Nuxt 3.6.x to 3.7.1 that caused crashes with navigation, particularly when using `<nuxt-link>`. This might be related to your issue if you're using a recent version of Nuxt. **Stack Overflow Post** (<https://stackoverflow.com/questions/77081487>)
Fast navigation and payload loading:Fast navigation on initial page load can cause issues with loading the payload.json file and rerunning asyncData unnecessarily. This could potentially lead to crashes if not handled properly. **Github Issue** (<https://github.com/nuxt/nuxt/issues/25049>)
View Transitions and data fetching:If you're using View Transitions, there's a known issue with data fetching in page setup functions. The documentation states: "By design, View Transitions completely freeze DOM updates whilst they are taking place." This could potentially cause issues with rapid navigation. **Nuxt Docs - Transitions** (<https://nuxt.com/docs/getting-started/transitions#known-issues>)
Navigation repaint:Nuxt has an experimental feature called `navigationRepaint` that waits for a single animation frame before navigation. This might help with your issue. You can try enabling it in your Nuxt config:

export default defineNuxtConfig({
  experimental: {
    navigationRepaint: true
  }
})

export default defineNuxtConfig({
  experimental: {
    navigationRepaint: true
  }
})

Nuxt Docs - Navigation Repaint (https://nuxt.com/docs/api/nuxt-config#navigationrepaint)

kapa.ai•12/16/24, 12:14 AM

Using lazy fetching:
Consider using useLazyFetchuseLazyFetch instead of useFetchuseFetch. This won't block client-side navigation and might help with your rapid navigation issue. Nuxt Docs - Data Fetching (https://nuxt.com/docs/getting-started/data-fetching#lazy)

To address your issue, you could try the following:

Update to the latest version of Nuxt if you haven't already, as there have been fixes for navigation-related issues.
Implement the navigationRepaintnavigationRepaint experimental feature.
Consider using useLazyFetchuseLazyFetch instead of useFetchuseFetch for non-critical data.
If you're using View Transitions, consider disabling them temporarily to see if it resolves the issue.

If these solutions don't work, you may need to create a minimal reproduction of the issue to get more specific help from the Nuxt community or developers.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------

kapa.ai•12/16/24, 12:14 AM

@187250017914978305 Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Artist201OP•12/16/24, 12:53 AM

@kapa.ai nuxt-link actually works fine, the issue is when the browser back and forth buttons are clicked

kapa.ai•12/16/24, 12:53 AM

Let me check the knowledge base for you again. One moment! :books:

kapa.ai•12/16/24, 12:53 AM

----------------------
Thank you for clarifying that the issue occurs specifically with browser back and forth buttons rather than nuxt-link navigation. Based on this information and the knowledge sources provided, I can offer some insights and potential solutions:

Router Scroll Behavior:There have been improvements to the default router `scrollBehaviour` in Nuxt that address issues with browser back/forward navigation, especially when page transitions are involved. This fix was implemented to handle first page load and page refresh scenarios, as well as hash-navigation when changing pages. **Github Pull Request** (<https://github.com/nuxt/nuxt/pull/24960>)
Navigation Repaint:As mentioned earlier, Nuxt has an experimental feature called `navigationRepaint` that can help with navigation performance. It's designed to reduce INP (Interaction to Next Paint) by giving the browser an opportunity to repaint before completing navigation. This could potentially help with rapid back/forward navigation. You can try enabling it in your Nuxt config:

export default defineNuxtConfig({
  experimental: {
    navigationRepaint: true
  }
})

export default defineNuxtConfig({
  experimental: {
    navigationRepaint: true
  }
})

Nuxt Docs - Navigation Repaint (https://nuxt.com/docs/api/nuxt-config#navigationrepaint)

Async Data Handling:
Ensure that your async data fetching is properly handled. One approach is to wrap your data fetching in useAsyncDatauseAsyncData. Here's an example of how to structure it:

await useAsyncData(async () => {
  if (authToken.value) {
    await fetchData();
  }
});

await useAsyncData(async () => {
  if (authToken.value) {
    await fetchData();
  }
});

This structure has been reported to help with issues related to data fetching and navigation. Stack Overflow Post (https://stackoverflow.com/questions/78516206)

kapa.ai•12/16/24, 12:53 AM

Consider Using useLazyFetchuseLazyFetch:
If the data isn't critical for the initial render, you might want to consider using useLazyFetchuseLazyFetch instead of useFetchuseFetch. This could potentially reduce the load during rapid navigation.

If these suggestions don't resolve the issue, it would be helpful to create a minimal reproduction of the problem. This would allow for a more detailed investigation and potentially help identify if it's a bug in Nuxt itself or related to your specific implementation.

Remember, when reporting bugs or seeking help, it's important to provide a minimal reproduction and detailed information about your Nuxt version and configuration. Nuxt Docs - Reporting Bugs (https://nuxt.com/docs/community/reporting-bugs)
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------

kapa.ai•12/16/24, 12:53 AM

@187250017914978305 Kapa.ai is still learning and improving, please let me know how I did by reacting below.

pages with usefetch causes browser tab crash on fast (back/forward) actions

Similar Threads

Similar Threads

Similar Threads