Nuxt非首页跳转报Node.appendChild: Cannot add children to a Comment

这个报错本质是Nuxt水合阶段DOM不匹配叠加<client-only>默认注释占位节点的操作冲突，触发逻辑非常明确：

1. Nuxt生产模式SSR时，<client-only>包裹的内容不会在服务端输出真实DOM，只会插入一个注释类型的占位节点，等客户端JS加载完成后才会替换成实际组件内容。
2. 从首页跳转其他页面时，Nuxt客户端路由会并行执行两个操作：卸载首页旧组件、渲染目标页新组件。这时候Splide轮播还没完成DOM初始化绑定，会尝试往已经被路由标记为待回收的注释占位节点上追加子元素——而注释节点本身不支持appendChild操作，直接抛出你看到的错误。
3. 前期排查到的现象完全对应这个逻辑：
   • 移除<client-only>后没有注释占位节点，自然不会触发这类错误，但Splide是纯客户端依赖，SSR阶段执行会因为找不到浏览器API直接渲染失败。
   • 清空HomeSlider内部内容、保留组件标签仍然报错，是因为冲突出在<client-only>占位节点、路由卸载、Splide初始化三者的时序上，和组件内部具体渲染内容无关。
   • 其他页面跳回首页不报错，是因为进入首页时<client-only>占位节点是首次渲染，没有被路由标记为待卸载，Splide初始化操作不会触发冲突。

按侵入性从低到高排序，优先尝试靠前的方案：

• 方案1：替换<client-only>默认注释占位为真实DOM节点
  给<client-only>指定真实元素作为占位符，从根源上避免操作注释节点，只需要修改index.vue的对应代码：

  <client-only placeholder="div">
    <home-slider :slides="slides"></home-slider>
  </client-only>
  

  不需要改动Splide相关逻辑，是成本最低的解决方案。
• 方案2：延迟HomeSlider挂载时机，避开路由切换的DOM操作窗口
  在HomeSlider组件里加挂载控制，等路由导航完成、客户端DOM稳定后再渲染Splide内容，修改HomeSlider.vue代码：

  <template>
    <div v-if="isReady">
      <Splide id="home-slider" :options="options">
        <SplideSlide v-for="slide in slides" :key="slide.id">
          <a :href="slide.enlace" class="slide">
            <div
              class="slide-content"
              v-html="slide.contenido"
              v-show="slide.contenido"
            ></div>
            <div class="img-container">
              <img :src="slide.imagen" :alt="slide.titulo" />
            </div>
          </a>
        </SplideSlide>
      </Splide>
    </div>
  </template>
  <script setup>
  const isReady = ref(false)
  onMounted(() => {
    nextTick(() => {
      // 把挂载逻辑推到事件循环下一轮，避开路由卸载的DOM操作期
      setTimeout(() => {
        isReady.value = true
      }, 0)
    })
  })
  </script>
  

• 方案3：排查非法HTML结构
  检查slide.contenido通过v-html渲染的内容，确认没有未闭合标签、非法嵌套（比如<p>套<div>、<a>套<a>）的问题，非法结构会导致浏览器解析DOM时出现节点偏移，放大Hydration阶段的不匹配问题。

内容的提问来源于stack exchange，提问作者Danyx