Duplicating content | Nuxt | Page 1

clear forum May 8, 2023, 3:04 PM

#

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)

#

    <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}`) ```

warm parcel May 8, 2023, 3:21 PM

#

Have you checked your console for hydration mismatches?

clear forum May 8, 2023, 3:34 PM

#

@warm parcel
only happens in production

#

it dosent show anything on console

warm parcel May 8, 2023, 3:43 PM

#

Tbh that sounds like prime hydration mismatch territory

#

Also you only want to have only one root element in your page

clear forum May 8, 2023, 3:53 PM

#

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

warm parcel May 8, 2023, 4:33 PM

#

I highly doubt this is a bug in nuxt

#Duplicating content