Hydration issues using nuxt generate if ContentRenderer is not wrapped into ClientOnly

[mklueh]

Environment

---

• Operating System: Windows_NT
• Node Version: v23.10.0
• Nuxt Version: 3.16.1
• CLI Version: 3.23.1
• Nitro Version: 2.11.7
• Package Manager: yarn@4.7.0
• Builder: -
• User Config: site, ogImage, robots, seo, schemaOrg, linkChecker, sitemap, app, runtimeConfig, fonts, image, vite, content, ssr, nitro, routeRules, umami, devtools, modules, components, typescript, compatibilityDate
• Runtime Modules: @vueuse/nuxt@13.0.0, nuxt-umami@3.2.0, @nuxtjs/seo@3.0.1, @unocss/nuxt@66.1.0-beta.7, @nuxt/content@3.4.0, @nuxt/fonts@0.11.0, @nuxt/image@1.10.0
• Build Modules: -

---

Version

v3.4.0

Reproduction

<template>
  <div class="flex flex-col items-center" v-if="page">

    <div v-if="!page" class="p-24">
      <h1>Review of "{{ params.slug }}" not found</h1>
      <p>Not found.</p>
      <NuxtLink to="/">Back to Homepage</NuxtLink>
    </div>

    <article v-else class="w-full prose prose-lg md:prose-xl 2xl:prose-2xl text-2xl prose-white">
      <div class="text-center md:px-4">
        <h1 class="text-4xl md:text-5xl underline">{{ page.title }}</h1>
      </div>

      <SomeComponent :review="page" class="my-12" />

      <p>{{ page.description }}</p>

      <div class="w-full flex justify-center bg-white p-4 rounded-lg" v-if="page.images && page.images.length > 0">
        <Gallery :game="page" class="my-4 lg:w-full" />
      </div>

      <template v-if="page">


        <ClientOnly>
          <ContentRenderer :value="page" />
        </ClientOnly>


      </template>
      <template v-else>
        <div class="mx-auto max-w-screen-lg">
          <div class="w-full p-12">
            <p>Does not exist anymore on this page</p>
            <nuxt-link class="btn bg-brand-primary text-white" to="/">
              Discover others
            </nuxt-link>
          </div>
        </div>
      </template>

      <SomeComponentA/>

      <div class="flex flex-col w-full border-opacity-50 space-y-12">
        <SomeComponentA :link="page?.link" :title="page.title" />
        <div class="divider text-brand-neutral font-bold text-3xl">oder</div>
        <SomeComponentB/>
      </div>
    </article>

    <SomeComponentD/>

    <SomeComponentE :current="path" :max="6" />
  </div>
</template>

<script lang="ts" setup>
const config = useRuntimeConfig();

const { params, path } = useRoute();

const { data: page, error, status } = await useAsyncData(async () => {
  return await queryCollection("review")
    .path(path)
    .first();
});

useSeoMeta({
  title: () => (page.value.title || "Not found"),
  ogTitle: () => (page.value.title || "Not found"),
  ogUrl: () => `${config.app.baseURL}/${page.value.path}`,
  ogImage: () => page.value.meta.images ? `${config.app.baseURL}/${page.value.meta.images?.[0]}` : undefined,
  description: () => page.value.description || "",
  ogDescription: () => page.value.description || "",
  twitterCard: "summary_large_image"
});
</script>

also this minimal example causes this error already, so without ContentRenderer

<template>
  <template v-if="page">
    {{page}}
  </template>
</template>

<script lang="ts" setup>
const config = useRuntimeConfig();

const { params, path } = useRoute();

const { data: page, error, status } = await useAsyncData(async () => {
  return await queryCollection("review")
    .path(path)
    .first();
});
</script>

nuxt.config.ts

ssr: true,
      
nitro: {
        preset: "netlify-static",

        compressPublicAssets: true,

        prerender: {
          routes: [
            "/"
          ],
          crawlLinks: true
        },
      },

      routeRules: {
        "/**": {
     
        }
      }
   

Description

I'm facing hydration issues when doing a static build and visiting the page. Need to wrap ClientOnly around the ContentRenderer and I'm not sure why, as the docs do not mention it anywhere.

But it seems that even despite ClientOnly, the error disappears but routing is not really working.

When I press on another link, it will change the URL but stay on the old page. Not sure what is wrong in my case

Additional context

No response

Logs

CF0_JVUW.js:3017 Hydration completed but contains mismatches.
logMismatchError @ CF0_JVUW.js:3017
hydrateNode @ CF0_JVUW.js:3084
hydrateChildren @ CF0_JVUW.js:3337
hydrateFragment @ CF0_JVUW.js:3375
hydrateNode @ CF0_JVUW.js:3129
hydrateChildren @ CF0_JVUW.js:3337
hydrateElement @ CF0_JVUW.js:3241
hydrateNode @ CF0_JVUW.js:3144
hydrateSubTree @ CF0_JVUW.js:5735
componentUpdateFn @ CF0_JVUW.js:5750
run @ CF0_JVUW.js:470
setupRenderEffect @ CF0_JVUW.js:5854
mountComponent @ CF0_JVUW.js:5691
hydrateNode @ CF0_JVUW.js:3163
hydrateSubTree @ CF0_JVUW.js:5735
__asyncHydrate @ CF0_JVUW.js:3597
componentUpdateFn @ CF0_JVUW.js:5744
run @ CF0_JVUW.js:470
setupRenderEffect @ CF0_JVUW.js:5854
mountComponent @ CF0_JVUW.js:5691
hydrateNode @ CF0_JVUW.js:3163
hydrateChildren @ CF0_JVUW.js:3337
hydrateElement @ CF0_JVUW.js:3241
hydrateNode @ CF0_JVUW.js:3144
hydrateSubTree @ CF0_JVUW.js:5735
componentUpdateFn @ CF0_JVUW.js:5750
run @ CF0_JVUW.js:470
setupRenderEffect @ CF0_JVUW.js:5854
(anonymous) @ CF0_JVUW.js:7321
Promise.then
registerDep @ CF0_JVUW.js:7310
mountComponent @ CF0_JVUW.js:5685
hydrateNode @ CF0_JVUW.js:3163
hydrateSubTree @ CF0_JVUW.js:5735
componentUpdateFn @ CF0_JVUW.js:5750
run @ CF0_JVUW.js:470
setupRenderEffect @ CF0_JVUW.js:5854
mountComponent @ CF0_JVUW.js:5691
hydrateNode @ CF0_JVUW.js:3163
hydrateChildren @ CF0_JVUW.js:3337
hydrateElement @ CF0_JVUW.js:3241
hydrateNode @ CF0_JVUW.js:3144
hydrateChildren @ CF0_JVUW.js:3337
hydrateElement @ CF0_JVUW.js:3241
hydrateNode @ CF0_JVUW.js:3144
hydrateSubTree @ CF0_JVUW.js:5735
componentUpdateFn @ CF0_JVUW.js:5750
run @ CF0_JVUW.js:470
setupRenderEffect @ CF0_JVUW.js:5854
(anonymous) @ CF0_JVUW.js:7321
Promise.then
registerDep @ CF0_JVUW.js:7310
mountComponent @ CF0_JVUW.js:5685
hydrateNode @ CF0_JVUW.js:3163
hydrateSubTree @ CF0_JVUW.js:5735
componentUpdateFn @ CF0_JVUW.js:5750
run @ CF0_JVUW.js:470
setupRenderEffect @ CF0_JVUW.js:5854
mountComponent @ CF0_JVUW.js:5691
hydrateNode @ CF0_JVUW.js:3163
hydrateSuspense @ CF0_JVUW.js:7381
hydrateNode @ CF0_JVUW.js:3199
hydrateSubTree @ CF0_JVUW.js:5735
componentUpdateFn @ CF0_JVUW.js:5750
run @ CF0_JVUW.js:470
setupRenderEffect @ CF0_JVUW.js:5854
mountComponent @ CF0_JVUW.js:5691
hydrateNode @ CF0_JVUW.js:3163
hydrateSubTree @ CF0_JVUW.js:5735
componentUpdateFn @ CF0_JVUW.js:5750
run @ CF0_JVUW.js:470
setupRenderEffect @ CF0_JVUW.js:5854
mountComponent @ CF0_JVUW.js:5691
hydrateNode @ CF0_JVUW.js:3163
hydrateSubTree @ CF0_JVUW.js:5735
componentUpdateFn @ CF0_JVUW.js:5750
run @ CF0_JVUW.js:470
setupRenderEffect @ CF0_JVUW.js:5854
mountComponent @ CF0_JVUW.js:5691
hydrateNode @ CF0_JVUW.js:3163
hydrateSubTree @ CF0_JVUW.js:5735
componentUpdateFn @ CF0_JVUW.js:5750
run @ CF0_JVUW.js:470
setupRenderEffect @ CF0_JVUW.js:5854
mountComponent @ CF0_JVUW.js:5691
hydrateNode @ CF0_JVUW.js:3163
hydrateChildren @ CF0_JVUW.js:3337
hydrateFragment @ CF0_JVUW.js:3375
hydrateNode @ CF0_JVUW.js:3129
hydrateChildren @ CF0_JVUW.js:3337
hydrateElement @ CF0_JVUW.js:3241
hydrateNode @ CF0_JVUW.js:3144
hydrateChildren @ CF0_JVUW.js:3337
hydrateElement @ CF0_JVUW.js:3241
hydrateNode @ CF0_JVUW.js:3144
hydrateSubTree @ CF0_JVUW.js:5735
componentUpdateFn @ CF0_JVUW.js:5750
run @ CF0_JVUW.js:470
setupRenderEffect @ CF0_JVUW.js:5854
mountComponent @ CF0_JVUW.js:5691
hydrateNode @ CF0_JVUW.js:3163
hydrateSubTree @ CF0_JVUW.js:5735
__asyncHydrate @ CF0_JVUW.js:3597
componentUpdateFn @ CF0_JVUW.js:5744
run @ CF0_JVUW.js:470
setupRenderEffect @ CF0_JVUW.js:5854
(anonymous) @ CF0_JVUW.js:7321
Promise.then
registerDep @ CF0_JVUW.js:7310
mountComponent @ CF0_JVUW.js:5685
hydrateNode @ CF0_JVUW.js:3163
hydrateSubTree @ CF0_JVUW.js:5735
componentUpdateFn @ CF0_JVUW.js:5750
run @ CF0_JVUW.js:470
setupRenderEffect @ CF0_JVUW.js:5854
mountComponent @ CF0_JVUW.js:5691
hydrateNode @ CF0_JVUW.js:3163
hydrateSubTree @ CF0_JVUW.js:5735
componentUpdateFn @ CF0_JVUW.js:5750
run @ CF0_JVUW.js:470
setupRenderEffect @ CF0_JVUW.js:5854
mountComponent @ CF0_JVUW.js:5691
hydrateNode @ CF0_JVUW.js:3163
hydrateSuspense @ CF0_JVUW.js:7381
hydrateNode @ CF0_JVUW.js:3199
hydrateSubTree @ CF0_JVUW.js:5735
componentUpdateFn @ CF0_JVUW.js:5750
run @ CF0_JVUW.js:470
setupRenderEffect @ CF0_JVUW.js:5854
mountComponent @ CF0_JVUW.js:5691
hydrateNode @ CF0_JVUW.js:3163
hydrateSubTree @ CF0_JVUW.js:5735
componentUpdateFn @ CF0_JVUW.js:5750
run @ CF0_JVUW.js:470
setupRenderEffect @ CF0_JVUW.js:5854
mountComponent @ CF0_JVUW.js:5691
hydrateNode @ CF0_JVUW.js:3163
hydrateSuspense @ CF0_JVUW.js:7381
hydrateNode @ CF0_JVUW.js:3199
hydrateSubTree @ CF0_JVUW.js:5735
componentUpdateFn @ CF0_JVUW.js:5750
run @ CF0_JVUW.js:470
setupRenderEffect @ CF0_JVUW.js:5854
mountComponent @ CF0_JVUW.js:5691
hydrateNode @ CF0_JVUW.js:3163
hydrate @ CF0_JVUW.js:3050
mount @ CF0_JVUW.js:4707
app.mount @ CF0_JVUW.js:9071
initApp @ CF0_JVUW.js:80586
await in initApp
(anonymous) @ CF0_JVUW.js:80594

[mklueh]

I think it might have something to do with my custom components/content/ProseImg.vue

Using nuxt/image here, it seemse those images are not generated during build, leading to 404 errors

<template>
  <div class="p-4 lg:p-12 flex justify-center">
    <NuxtImg
      v-bind="$attrs"
      class="shadow-lg rounded w-full"
      height="450"
      fit="contain"
      format="webp"
    />
  </div>
</template>

Edit: forget this one, seems to be another issue but unrelated to the hydration issue

[farnabaz]

Do you mind providing a simple reproduction project? a Github repo would be nice.

[mklueh]

@farnabaz I'm trying to reproduce it.

So far I'm running into this one in dev but not sure if it is related either

runtime-core.esm-bundler.js?v=0b45363e:50 [Vue warn]: Hydration text mismatch in <strong>​…​</strong>​ 
  - rendered on server: "charmantes\nKonzept"
  - expected on client: "charmantes\r\nKonzept" 

[mklueh]

@farnabaz https://github.com/mklueh/nuxt-content-reproducer

So just do a yarn && yarn generate && yarn preview:static, navigate to A or B, then from there to the other subpage

[mklueh]

@farnabaz hello, have you managed to look into the reproducer already?