启用SSR后Nuxt页面Footer等元素重复显示问题求助

核心问题定位 #

你的页面模板中手动添加了<body>标签，而Nuxt框架会自动生成完整的HTML结构（包括<html>和<body>）。启用SSR时，服务器会将你手动写的<body>作为页面内容插入到自动生成的<body>内部，客户端hydrate阶段又会重新渲染一次，最终导致hero元素下方的内容、Footer等出现重复副本。

修复步骤 #

1. 移除模板中的<body>标签 #

将原模板中包裹内容的<body>标签删除，直接将内部的<section>、组件、<footer>等放在根节点下：

修改后的index.vue模板示例：

<template>
  <header class="fixed opacity-[.98] bg-info text-base-200 z-50">
    <div class="navbar w-screen">
      <div class="flex-1">
        <NuxtLink to="/" class="absolute w-28">
          <nuxt-img
            alt="Yuuera logo"
            src="@/assets/images/logo.png"
            class="w-28 fill-current"
          />
        </NuxtLink>
      </div>
      <div class="flex-none">
        <div class="pr-4 mt-2">
          <NuxtLink to="/about"
            ><span class="text-primary text-lg font-semibold"
              >About</span
            ></NuxtLink
          >
        </div>
      </div>
    </div>
  </header>

  <section class="h-2/3 pt-24">
    <nuxt-img
      src="@/assets/images/twitter base trans.png"
      class="absolute top-7 opacity-10 z-0 lowest-el"
    />
    <div>
      <div class="flex justify-center items-center">
        <div class="hero-content text-center text-neutral-content">
          <div class="max-w-4xl sm:text-left">
            <h1 class="text-primary text-6xl md:text-9xl font-semibold">
              Who we are
            </h1>
          </div>
        </div>
      </div>
    </div>

    <div class="rounded-3xl bg-info z-40">
      <div class="mt-10 flex justify-center">
        <h1 class="text-primary p-4 font-bold text-4xl md:text-7xl">
          Vision
        </h1>
      </div>
      <div class="flex justify-center">
        <div class="p-4 md:w-2/3 rounded-3xl">
          <p
            class="text-xl text-center leading-loose tracking-widest text-l lg:text-2xl"
          >
            ...
          </p>
        </div>
      </div>
    </div>
  </section>

  <section>
    <div class="avatar">
      <nuxt-img src="@/assets/images/laptopstock.png" />
    </div>
    <div class="flex justify-center items-center mb-12">
      <div class="hero-content text-center text-neutral-content">
        <div class="max-w-4xl sm:text-left">
          <h1 class="text-primary font-bold text-4xl md:text-7xl">
            Company Story
          </h1>
        </div>
      </div>
    </div>

    <div class="mt-10 mb-12 flex justify-center">
      <div class="p-4 md:w-2/3 rounded-3xl">
        <p
          class="text-xl text-center leading-loose tracking-widest text-l lg:text-2xl"
        >
          ...
          time.
        </p>
      </div>
    </div>
  </section>

  <section>
    <div>
      <div class="flex justify-center items-center mb-12">
        <div class="hero-content text-center text-neutral-content">
          <div class="max-w-4xl sm:text-left">
            <h1 class="text-primary font-bold text-4xl md:text-7xl">
              Our Values
            </h1>
          </div>
        </div>
      </div>
      <div class="flex rounded-3xl bg-info p-4 mb-12 team-member flex-col">
        <div class="flex justify-center">
          <nuxt-img
            src="@/assets/images/padlock.png"
            class="margin-left-24px justify-contents"
          />
        </div>
        <div>
          <p class="font-medium p-8 text-2xl">Security:</p>
          <p class="font-medium text-lg">
            ...
          </p>
        </div>
      </div>

      <div class="flex rounded-3xl bg-info p-4 mb-12 h team-member flex-col">
        <div class="flex rounded">
          <nuxt-img src="@/assets/images/internet-image.png" />
        </div>
        <div>
          <p class="font-medium p-8 text-2xl">Community:</p>
          <p class="font-medium text-lg">
           ...
          </p>
        </div>
      </div>

      <div class="flex rounded-3xl bg-info p-4 team-member flex-col">
        <div class="flex rounded">
          <nuxt-img src="@/assets/images/chatbubbles.png" />
        </div>
        <div>
          <p class="font-medium p-8 text-2xl">Consumer Focused:</p>
          <p class="font-medium text-lg">
            ...
          </p>
        </div>
      </div>
    </div>
  </section>
  <EmailSignUp class="pt-4 pb-4"></EmailSignUp>

  <footer class="footer footer-center p-4 bg-primary text-primary-content">
    <div>
      <p class="font-bold">... <br /></p>
      <p>YuueraOffical@gmail.com</p>
    </div>
    <div>
      <div class="grid grid-flow-col gap-4">
        <a href="https://twitter.com/..."
          ><svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            class="fill-current"
          >
            <path
              d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"
            ></path></svg
        ></a>
      </div>
    </div>
  </footer>
</template>

<script setup lang="ts">
</script>

<style scoped lang="scss">
@import 'assets/scss/appStyles.scss';
</style>

2. 检查组件的SSR兼容性 #

如果EmailSignUp组件依赖浏览器专属API（如window、document），在SSR渲染时会出错，也可能间接导致重复渲染问题。此时可以用<client-only>标签包裹该组件，让它只在客户端渲染：

<client-only>
  <EmailSignUp class="pt-4 pb-4"></EmailSignUp>
</client-only>

3. 验证Nuxt配置 #

确认nuxt.config.ts中没有重复挂载的异常配置，比如是否错误地将页面内容多次引入到app.vue中。

为什么禁用SSR时问题消失？ #

禁用SSR后，页面完全在客户端渲染，Nuxt不会生成服务端HTML，手动添加的<body>标签不会被重复嵌套，因此不会出现内容重复的情况。

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