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.

Browser url changes before useAsyncData / useFetch resolves and ssr

See original GitHub issue

Environment

Operating System: Windows_NT
Node Version: v16.14.2
Nuxt Version: 3.0.0-rc.4
Package Manager: yarn@1.22.17
Builder: vite
User Config: runtimeConfig, app, autoImports, buildModules, css, experimental, modules, typescript
Runtime Modules: @nuxtjs/tailwindcss@5.1.3
Build Modules: @pinia/nuxt@0.1.9, @vueuse/nuxt@8.7.5

Reproduction

https://stackblitz.com/edit/github-xdvam9?file=pages/about/index.vue

Open in new window and enable 3g throttling in Chrome devtools.

Describe the bug

When clicking on NuxtLink, the browser url changes before useAsyncData and/or useFetch resolves. This is an issue when using things like the exact class to highlight navigation links. Also, if there is an error in asyncData/useFetch and you need to navigate somewhere else, the url will flash back and forth, creating poor UX.

In Nuxt 2, the browser url would not change until asyncData was resolved and the page had been rendered. It worked well.

Additional context

No response

Logs

No response

Issue Analytics

State:
Created a year ago
Reactions:1
Comments:5 (2 by maintainers)

Top GitHub Comments

1reaction

b-barrycommented, Jul 26, 2022

Hello @danielrjames ,

I can confirm that I have the same issue. I forked your reproduction. I have added the router.afterEach function and you can see that the log is triggered before the asyncData was resolved. I was expecting to see first the log of asyncData then the log of the router

0reactions

danielroecommented, Aug 16, 2022

We did refactor it to a separate component, which might help with perf: https://github.com/nuxt/framework/blob/f350a70775016a8bde92670b4856d5d1edb1e7e0/packages/nuxt/src/pages/runtime/page.ts#L60-L78

Top Results From Across the Web

Data Fetching · Get Started with Nuxt

This composable provides a convenient wrapper around useAsyncData and $fetch . It automatically generates a key based on URL and fetch options, provides...

Nuxt async fetch() doesn't make server side request on ...

Client and server request urls would be different because the project is running in docker behind nginx. My concern here is to always...

Vue to Nuxt: Server-Side Rendering Example

What is SSR and why we need it? Once we moved most of the logic to the client-side, our browser had a problem...

Data Fetching - Nuxt

The fetch hook should return a promise (whether explicitly, or implicitly using async/await ) that will be resolved: On the server, before the...

Data Fetching - 《Nuxt 3 beta Documentation》 - 书栈网

Nuxt provides useFetch , useLazyFetch , useAsyncData and ... you can use useAsyncData to get access to data that resolves asynchronously.