如何在Next.js中实现带getServerSideProps与状态管理的SSR Header？

问题梳理 #

在Next.js（13+ App Router）中，根布局RootLayout默认是服务端组件，直接在其中使用类组件<Header/>会触发错误：

“You’re importing a class component. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.”

若给Header添加"use client"会跳过服务端数据逻辑，直接转为客户端渲染；误以为函数组件无法使用状态管理；将Header嵌入每个子页面又过于繁琐。需求是让Header既通过服务端渲染获取数据，又能支持setState/useState等交互逻辑。

核心解决方案：分离服务端数据获取与客户端交互 #

Next.js的服务端组件（Server Components）负责数据获取与静态渲染，客户端组件（Client Components）负责交互逻辑，两者结合即可实现需求。

方案1：App Router下的拆分实现 #

步骤1：创建服务端数据组件（负责SSR数据获取）

新建components/HeaderServer.js，作为服务端组件获取Header所需数据，再传递给客户端交互组件：

// components/HeaderServer.js
// 无需标记"use client"，默认是服务端组件
export async function HeaderServer() {
  // 替代getServerSideProps的服务端数据获取逻辑
  const res = await fetch('你的接口地址', { cache: 'no-store' }); // 实时数据，类似getServerSideProps的行为
  const headerData = await res.json();

  // 动态导入客户端组件（避免服务端渲染时执行客户端逻辑）
  const HeaderClient = (await import('./HeaderClient')).default;
  
  return <HeaderClient data={headerData} />;
}

步骤2：创建客户端交互组件（支持状态管理）

新建components/HeaderClient.js，标记为客户端组件，实现UI与交互逻辑：

// components/HeaderClient.js
'use client'; // 必须标记，声明为客户端组件

import { useState } from 'react';

export default function HeaderClient({ data }) {
  const [isMenuExpanded, setIsMenuExpanded] = useState(false);

  return (
    <header className="header">
      <h2>{data.siteName}</h2>
      <button onClick={() => setIsMenuExpanded(!isMenuExpanded)}>
        {isMenuExpanded ? '收起菜单' : '展开菜单'}
      </button>
      {/* 基于服务端数据渲染的内容 + 客户端交互逻辑 */}
    </header>
  );
}

步骤3：在RootLayout中使用服务端组件

修改layout.js，引入并使用HeaderServer：

// layout.js
import { HeaderServer } from './components/HeaderServer';
import { inter } from './fonts';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <HeaderServer />
        {children}
      </body>
    </html>
  );
}

方案2：Pages Router下的全局数据传递 #

若使用Pages Router（基于_app.js），可在全局入口获取Header数据，再传递给客户端Header组件：

步骤1：在_app.js中全局获取服务端数据

// pages/_app.js
import Header from '../components/Header';

function MyApp({ Component, pageProps, headerData }) {
  return (
    <>
      <Header data={headerData} />
      <Component {...pageProps} />
    </>
  );
}

export async function getServerSideProps(context) {
  // 获取Header所需的服务端数据
  const res = await fetch('你的接口地址');
  const headerData = await res.json();

  // 保留页面自身的getServerSideProps逻辑（如果有）
  const pageProps = await (Component.getServerSideProps?.(context) || Promise.resolve({}));

  return {
    props: {
      headerData,
      ...pageProps,
    },
  };
}

export default MyApp;

步骤2：实现客户端Header组件

// components/Header.js
'use client'; // 标记为客户端组件

import { useState } from 'react';

export default function Header({ data }) {
  const [searchText, setSearchText] = useState('');

  return (
    <header>
      <h1>{data.title}</h1>
      <input
        type="text"
        value={searchText}
        onChange={(e) => setSearchText(e.target.value)}
        placeholder="搜索..."
      />
    </header>
  );
}

关键说明 #

1. 函数组件完全支持状态管理：只要标记为"use client"，函数组件可以正常使用useState/useEffect等React钩子，无需局限于类组件。
2. SSR依然生效：服务端组件负责数据获取与初始HTML渲染，客户端组件仅在浏览器端接管交互逻辑，初始页面仍是服务端渲染输出。
3. 避免直接在服务端组件中使用客户端API：如window、document等，需放在客户端组件的useEffect或事件回调中。

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