Next.js服务端渲染页面用useSession报错，如何保留SSR并解决？

错误的核心原因是：useSession()是客户端React钩子，只能在标记为"use client"的组件中调用，而App Router下的page.tsx默认是服务端组件，不允许使用客户端钩子，因此直接调用会触发报错。

以下两种方案可以保留page.tsx的服务端渲染模式，同时解决报错：

方案一：在服务端获取Session后传递给客户端组件 #

利用服务端方法（比如Auth.js的getServerSession）在服务端组件中获取session，再将其作为props传给客户端组件NavigationBar。这种方式能让客户端组件初始化时就拿到session，避免客户端额外请求。

代码示例： #

服务端组件 page.tsx

import { getServerSession } from "next-auth/next";
import { authOptions } from "@/app/api/auth/[...nextauth]/route"; // 导入你的Auth配置
import NavigationBar from "./NavigationBar";

export default async function Home() {
  // 在服务端同步获取session
  const session = await getServerSession(authOptions);

  return (
    <div>
      <NavigationBar session={session} />
      {/* 其他服务端渲染的页面内容 */}
    </div>
  );
}

客户端组件 NavigationBar.tsx

"use client";

// 建议替换为具体的Session类型（比如从next-auth导入）
type NavigationBarProps = {
  session: any;
};

const NavigationBar = ({ session }: NavigationBarProps) => {
  // 直接使用传入的session做逻辑处理
  return (
    <nav>
      {session ? (
        <span>欢迎回来，{session.user?.name}</span>
      ) : (
        <span>请登录</span>
      )}
    </nav>
  );
};

export default NavigationBar;

方案二：让客户端组件自行获取Session #

如果不需要在服务端预渲染session相关内容，可以将useSession的调用移到NavigationBar内部，page.tsx作为服务端组件无需处理session逻辑。

代码示例： #

服务端组件 page.tsx

import NavigationBar from "./NavigationBar";

export default function Home() {
  return (
    <div>
      <NavigationBar />
      {/* 其他服务端渲染的页面内容 */}
    </div>
  );
}

客户端组件 NavigationBar.tsx

"use client";

import { useSession } from "next-auth/react";

const NavigationBar = () => {
  // 在客户端组件内部调用useSession
  const { data: session } = useSession();

  return (
    <nav>
      {session ? (
        <span>欢迎回来，{session.user?.name}</span>
      ) : (
        <span>请登录</span>
      )}
    </nav>
  );
};

export default NavigationBar;

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