framework
framework copied to clipboard
nuxt
Global Middleware on first load both side
Environment
- Operating System:
Linux - Node Version:
v16.14.2 - Nuxt Version:
3.0.0-27484505.9f6eff7 - Package Manager:
[email protected] - Builder:
vite - User Config:
vite,privateRuntimeConfig,publicRuntimeConfig,css,buildModules,intlify,vueuse - Runtime Modules:
- - Build Modules:
@intlify/[email protected],@pinia/[email protected],@vueuse/[email protected]
Reproduction
https://stackblitz.com/edit/github-dypzgk
Describe the bug
On first load, the global middleware get executed on both side (server and client). In Nuxt 2, if the app is in universal mode, at first load the middleware get executed only by server side.
Additional context
No response
Logs
No response
Hey @shinguweb96
Could you explain your specific use case to run this global middleware only once?
@Atinux In Nuxt 2, if the app is in universal mode, at first load the middleware get executed only by server side. I think there are a bunch of use cases where you would want to execute the middleware only once, like counting the number of pages visited. I have noticed that also the asyncData behaviour has changed. In nuxt2 returning to the page/route would call async data again but now you need to provide a unique key. For example a use case is that you need to provide a unique key on revisiting the page to be able to refresh the data in asyncData.
@pskclub You can use if (process.server) for example if you want to run it only on server.
@pskclub You can use
if (process.server)for example if you want to run it only on server.
i only need to run once if the route changes, how can i do that?
@pskclub You can use
if (process.server)for example if you want to run it only on server.i only need to run once if the route changes, how can i do that?
I have also ran into this issue. I find a way to judge whether it is running in server side or in client.
- use
process.clientorprocess.server. if code is running in client side,process.clientwill be true. So if you want to count page enter times, you can addif (process.client)block. - use
useNuxtApp(). If you need to access nuxtApp by coincidence, you can useuseNuxtApp().ssrContextto judge, because this property only exist in server side.
