N
Nuxt•2w ago
Fedox

Page loads twice

Heya, I currently have the problem that my page loads 2 times as soon as I enter it, here is my script part: 
<script lang="ts" setup>
const route = useRoute()
const name = route.params.name as string

const prettyName = name.charAt(0).toUpperCase() + name.slice(1).replace(/-/g, ' ')

useHead({
    title: prettyName,
    meta: [
        {
            name: 'description',
            content: `Entdecke die Kategorie ${prettyName} im Timolia-Shop!`,
        },
    ],
})

const config = useRuntimeConfig()
const url = `https://headless.tebex.io/api/accounts/${config.public.tebex}/categories?includePackages=1`

const data = await $fetch(url)
const category = computed(() => {
    return data?.data.find((cat: any) => cat.slug === name) || null
})
</script>
<script lang="ts" setup>
const route = useRoute()
const name = route.params.name as string

const prettyName = name.charAt(0).toUpperCase() + name.slice(1).replace(/-/g, ' ')

useHead({
    title: prettyName,
    meta: [
        {
            name: 'description',
            content: `Entdecke die Kategorie ${prettyName} im Timolia-Shop!`,
        },
    ],
})

const config = useRuntimeConfig()
const url = `https://headless.tebex.io/api/accounts/${config.public.tebex}/categories?includePackages=1`

const data = await $fetch(url)
const category = computed(() => {
    return data?.data.find((cat: any) => cat.slug === name) || null
})
</script>
And I have attached another video which shows this error. (I have limited the internet speed so that you can see it better)
3 Replies
kapa.ai
kapa.ai•2w ago
Hi @Fedox. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- It appears you're experiencing an issue where your Nuxt page loads (and fetches data) twice when you visit it. This is a common concern in Nuxt 3, and several possible causes and explanations are discussed in the knowledge sources: 1. SSR + Client Hydration In Nuxt 3, when using SSR (Server-Side Rendering, the default), your data-fetching code (like await $fetch(...)) runs once on the server to render the initial HTML, and then again on the client to hydrate the page. This can result in two requests if not handled properly. Using composables like useFetch or useAsyncData is recommended, as they are designed to avoid duplicate requests by caching the result between server and client. Directly using await $fetch(...) in your <script setup> will not benefit from this optimization and will likely cause double fetching. 2. Layouts and Dynamic Components There are known issues where using layouts or dynamic components can cause useFetch or useAsyncData to run twice—once on the server and again on the client, or even twice on the client in some scenarios. This is especially true if you have a layout wrapping your page, or if you use dynamic imports/components. See this issue and this one for more details. 3. Recommendations - Switch to useFetch or useAsyncData:
Replace your direct $fetch call with useFetch or useAsyncData, which are designed to prevent duplicate requests in SSR/CSR transitions. 
  const { data } = await useFetch(url)
  
  const { data } = await useFetch(url)
- Check for Layout or Dynamic Component Issues:
If your page uses a layout or dynamic components, be aware that this can trigger double fetching in some Nuxt versions. This is a known issue and may be improved in future releases. - Client-Side Only (if appropriate):
If you want to avoid SSR for this page (not recommended for SEO-critical pages), you can disable SSR for the route using route rules: 
  // nuxt.config.ts
  export default defineNuxtConfig({
    routeRules: {
      '/your-route': { ssr: false }
    }
  })
  
  // nuxt.config.ts
  export default defineNuxtConfig({
    routeRules: {
      '/your-route': { ssr: false }
    }
  })
- Caching and Keys:
If you use useFetch, you can control caching with the key option to ensure fresh data when needed. 4. Example Fix Replace: 
const data = await $fetch(url)
const data = await $fetch(url)
With: 
const { data } = await useFetch(url)
const { data } = await useFetch(url)
This should help prevent the double-fetching issue in most cases, as useFetch is aware of SSR/CSR transitions and caches accordingly. --- Summary:
The double loading is likely due to SSR hydration or layout/component structure. Use useFetch or useAsyncData instead of direct $fetch to avoid duplicate requests, and be aware of known issues with layouts and dynamic components in Nuxt 3. For more details, see the related discussions: useAsyncData and useFetch run twice if page uses layout, data fetched again on client when inside an async component. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2w ago
<@1121449150140141648> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Fedox
FedoxOP•2w ago
Same problem with useFetch.

Did you find this page helpful?