Nuxt•2y ago

Duplicating content

can anybody help me? I have a page (nuxt3) that displays the list of posts, when I enter it it loads normally, however, when I press F5 for example, it displays the entire page content in duplicate. Does anyone know what this can be? Only happens in production (vercel, netlify)

7 Replies

formigueiro•2y ago

    <div class="flex flex-col h-screen">
      <div class="header text-center font-medium leading-normal">Lista de Postagens</div>

      <div class="flex-grow">
        <div class="px-10 py-20 min-h-screen">
          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <ThumbPost v-for="(post, index) in posts" :key="index" :data="post" />
          </div>

          <DownArrow v-if="!showNoMoreText" class="mt-20" />

          <p v-else class="w-full text-center pt-20 pb-10">Sem mais conteúdo para mostrar</p>
        </div>
      </div>
      <AlternativeFooter />
    </div>

  const { data: postData, error } = await useLazyFetch(`/api/posts/paginate/?page=${page}`)

    <div class="flex flex-col h-screen">
      <div class="header text-center font-medium leading-normal">Lista de Postagens</div>

      <div class="flex-grow">
        <div class="px-10 py-20 min-h-screen">
          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <ThumbPost v-for="(post, index) in posts" :key="index" :data="post" />
          </div>

          <DownArrow v-if="!showNoMoreText" class="mt-20" />

          <p v-else class="w-full text-center pt-20 pb-10">Sem mais conteúdo para mostrar</p>
        </div>
      </div>
      <AlternativeFooter />
    </div>

  const { data: postData, error } = await useLazyFetch(`/api/posts/paginate/?page=${page}`)

warflash•2y ago

Have you checked your console for hydration mismatches?

formigueiro•2y ago

@warflash only happens in production it dosent show anything on console

warflash•2y ago

Tbh that sounds like prime hydration mismatch territory Also you only want to have only one root element in your page

formigueiro•2y ago

I put the content inside the <ClientOnly> tag and it stopped to duplicate, this is a bug not fixed in nuxt3 yet

warflash•2y ago

I highly doubt this is a bug in nuxt

formigueiro•2y ago

i saw this issue : https://github.com/primefaces/primevue/issues/2482

GitHub

Nuxt3: Toast component causes duplicate content · Issue #2482 · pri...

I'm submitting a ... (check one with "x") [x] bug report => Search github for a similar issue or PR before submitting [ ] feature request => Please check if request is not on th...

Gaming

Programming

Duplicating content