在Next.js Server Component中实现UI交互且保留SSR的方法

你的核心需求是在不把整个RootLayout转为客户端组件的前提下，实现鼠标悬停分类链接时显示nav-bar，同时保留服务端渲染（SSR）特性，下面是两种可行方案：

方案一：纯CSS实现（推荐，无需JavaScript） #

这种方案完全依赖浏览器原生CSS处理交互，不需要任何客户端脚本，所有渲染逻辑都在服务端完成，完美保留SSR。

修改RootLayout的代码，调整结构和CSS类：

export default async function RootLayout({ children }) {
  const categories = await getCategories();

  return (
    <html lang="en">
      <body className={poppins.className}>
        <header className="fixed left-0 top-0 w-full">
          {/* 新增容器包裹分类栏和导航栏，用于CSS hover触发 */}
          <div className="header-hover-container">
            <div
              className="flex w-full flex-col items-center justify-center space-y-4 p-6 shadow"
            >
              <div
                className="flex flex-row items-center justify-center space-x-5 font-extralight"
              >
                {categories.map((data) => (
                  <Link href="/new" className="link uppercase">
                    {data}
                  </Link>
                ))}
              </div>
            </div>
            {/* 默认隐藏导航栏，hover容器时显示 */}
            <div
              className="nav-bar hidden z-10 min-h-[250px] w-full justify-center p-6 shadow"
            ></div>
          </div>
        </header>

        <div className="mx-auto 2xl:container">{children}</div>
      </body>
    </html>
  );
}

添加对应的CSS（可放在全局样式文件或Tailwind自定义样式中）：

.header-hover-container:hover .nav-bar {
  display: flex; /* 根据实际布局需求调整display值，比如block */
}

原理：利用CSS父元素的hover状态控制子元素的显示/隐藏，完全由浏览器处理交互，RootLayout始终是纯服务端组件，所有内容都在服务端渲染生成。

方案二：拆分客户端组件（适合复杂交互场景） #

如果你的交互逻辑不止单纯的显示隐藏（比如需要加载动态数据、复杂动画等），可以把交互部分拆成独立的客户端组件，RootLayout依然保留服务端渲染特性。

步骤1：创建客户端组件 HeaderInteractive.jsx #

'use client';

import { useState } from 'react';
import Link from 'next/link';

export default function HeaderInteractive({ categories }) {
  const [navigationVisible, setNavigationVisible] = useState(false);

  const handleHoverEnter = () => {
    setNavigationVisible(true);
  };

  const handleHoverLeave = () => {
    setNavigationVisible(false);
  };

  return (
    <div 
      className="header-container"
      onMouseEnter={handleHoverEnter}
      onMouseLeave={handleHoverLeave}
    >
      <div
        className="flex w-full flex-col items-center justify-center space-y-4 p-6 shadow"
      >
        <div
          className="flex flex-row items-center justify-center space-x-5 font-extralight"
        >
          {categories.map((data) => (
            <Link href="/new" className="link uppercase">
              {data}
            </Link>
          ))}
        </div>
      </div>
      <div
        className={`nav-bar z-10 min-h-[250px] w-full justify-center p-6 shadow ${navigationVisible ? 'block' : 'hidden'}`}
      ></div>
    </div>
  );
}

步骤2：修改RootLayout（依然是服务端组件） #

import HeaderInteractive from './HeaderInteractive';

export default async function RootLayout({ children }) {
  const categories = await getCategories();

  return (
    <html lang="en">
      <body className={poppins.className}>
        <header className="fixed left-0 top-0 w-full">
          {/* 渲染客户端组件，传入服务端获取的categories数据 */}
          <HeaderInteractive categories={categories} />
        </header>

        <div className="mx-auto 2xl:container">{children}</div>
      </body>
    </html>
  );
}

原理：RootLayout保持服务端组件身份，负责在服务端获取categories数据并传递给客户端组件。客户端组件仅处理hover状态和交互逻辑，不影响RootLayout的服务端渲染，页面静态内容依然在服务端生成，仅交互逻辑在客户端执行。

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