Nuxt•9mo ago

Middleware called 3 times instead of 2 ? (stackblitz reproduction)

Can you tell me why my middleware is called 3 times ? https://stackblitz.com/edit/github-3enzca-ixdqzf I have the same issue on my middlewares were I have redirections... It's always called 3 times. If I put logic outside middleware in setup, only 2 times happening.

10 Replies

LATEEK•9mo ago

@! GhostvOne.tv 👻🇫🇷 you have an older nuxt version (3.4.3), this one has been addressed in more recent version (https://github.com/nuxt/nuxt/pull/21412)

GitHub

fix(nuxt): skip vue render when redirecting by danielroe · Pull Req...

🔗 Linked issue resolves #20696 ❓ Type of change 📖 Documentation (updates to the documentation, readme or JSdoc annotations) 🐞 Bug fix (a non-breaking change that fixes an issue) 👌 Enhancement ...

! GhostvOne.tv 👻🇫🇷OP•9mo ago

Ill update reproduction but atm in my local project i have the last vr Issue still here I updated nuxt to 3.11.1 and same issue here https://stackblitz.com/edit/github-3enzca-ixdqzf .

LATEEK•9mo ago

Ok I get it, so I think it is attended. /a -> /a: cause you're hard loading the /a page. /a -> /b: cause you ask to redirect to /b so we need to trigger potentiel middleware linked. /b -> /b: cause you're hard loading the /b page.

! GhostvOne.tv 👻🇫🇷OP•9mo ago

Only A is hard loading. It should be A -> A -> Middleware -> Redirecting to B -> Middleware -> Showing B Like it works If I put the script in the setup instead of the middleware

LATEEK•9mo ago

Yes because you're making a redirect there. So you're asking for new ressource location .ie: /b

LATEEK•9mo ago

In other words, A is never really loaded because you don't get the html, instead you get redirected to /b which will be SRR

! GhostvOne.tv 👻🇫🇷OP•9mo ago

My middleware is making an api request to check slugs in the link. If I put this logic in my middleware, it does 3 API calls. If I put this logic in page setup, only two (as intended). What i'm understing in Nuxt, middleware shouldn't be used If I have redirection and API call ? If I use middleware for that atm, it does one more call for nothing

LATEEK•9mo ago

Not sure were your calls are made/needed and their purpose, so I couldn't say much about this. But I don't think such limitation exists, maybe some additionals checks in the middleware could solve this. Usually useAsyncData is my way to go, so fetch logic belongs to my page/component that need it, but as said, it might not be the right solution, really depends of what we're trying to achieive

! GhostvOne.tv 👻🇫🇷OP•9mo ago

Here my real middleware I think you will understand

import type { FetchApiRedirectInterface } from '~/assets/js/interfaces/FetchApiRedirectInterface'

export default defineNuxtRouteMiddleware(async (to, from) => {
    if (process.client && from && from.meta.key === to.meta.key) return
    const nuxtApp = useNuxtApp()
    if (nuxtApp.isHydrating) return

    const mainResourceCategorySlug = to.params
        .main_resource_category_slug as string | undefined
    const resourceCategorySlug = to.params.resource_category_slug as
        | string
        | undefined

    if (!mainResourceCategorySlug && !resourceCategorySlug) {
        return
    }

    const categoryStore = useCategoryStore()

    // Send slug to API and check if it's fine or redirection needed
    const response = await useCheckResourceCategorySlug({
        category_id: categoryStore.category!.id,
        main_resource_category_slug: mainResourceCategorySlug,
        resource_category_slug: resourceCategorySlug ?? null,
        fetch_type: 'fetch', // its use useFetch here
    })

    const data = response.data.value as FetchApiRedirectInterface


    const localePath = useLocalePath()
    if (!data) {
        return navigateTo(localePath('/'))
    }

    if (data.redirect) {
        return navigateTo(localePath(data.redirect), {
            redirectCode: data.code,
        })
    }
})

import type { FetchApiRedirectInterface } from '~/assets/js/interfaces/FetchApiRedirectInterface'

export default defineNuxtRouteMiddleware(async (to, from) => {
    if (process.client && from && from.meta.key === to.meta.key) return
    const nuxtApp = useNuxtApp()
    if (nuxtApp.isHydrating) return

    const mainResourceCategorySlug = to.params
        .main_resource_category_slug as string | undefined
    const resourceCategorySlug = to.params.resource_category_slug as
        | string
        | undefined

    if (!mainResourceCategorySlug && !resourceCategorySlug) {
        return
    }

    const categoryStore = useCategoryStore()

    // Send slug to API and check if it's fine or redirection needed
    const response = await useCheckResourceCategorySlug({
        category_id: categoryStore.category!.id,
        main_resource_category_slug: mainResourceCategorySlug,
        resource_category_slug: resourceCategorySlug ?? null,
        fetch_type: 'fetch', // its use useFetch here
    })

    const data = response.data.value as FetchApiRedirectInterface


    const localePath = useLocalePath()
    if (!data) {
        return navigateTo(localePath('/'))
    }

    if (data.redirect) {
        return navigateTo(localePath(data.redirect), {
            redirectCode: data.code,
        })
    }
})

When i try to go on a page with wrong slugs, here this middleware is calling 3 times. If I put everything here in my setup page instead of here my middleware, api is called only two times

Gaming

Programming

Middleware called 3 times instead of 2 ? (stackblitz reproduction)