Next14 App目录下主页面预加载Next Auth会话的方法

核心方案：服务端预取会话 + 传递给客户端交互组件 #

你可以通过服务端组件预取会话数据，再将数据作为props传递给带交互的客户端组件，既保留页面的交互性，又能让客户端组件首次渲染就拿到会话数据，无需等待useSession()的异步响应。

具体实现步骤（基于Next Auth v5） #

1. 服务端父组件获取会话：在路由的page.tsx（默认是服务端组件，无需'use client'）中，使用Next Auth v5的auth()函数同步获取会话数据。
2. 传递会话到客户端组件：将获取到的会话作为props传给标记了'use client'的子组件（交互逻辑放在这里）。
3. 客户端组件复用初始会话：在客户端组件中，给useSession()传入initialSession参数，让钩子以预取的会话作为初始值，同时自动监听后续会话变化。

代码示例 #

1. 服务端父组件（app/page.tsx）

import { auth } from '@/auth'; // 导入你的Next Auth配置
import ClientHome from './ClientHome';

export default async function HomePage() {
  // 服务端同步获取会话，无客户端请求延迟
  const session = await auth();

  // 将会话传递给客户端交互组件
  return <ClientHome initialSession={session} />;
}

2. 客户端交互组件（app/ClientHome.tsx）

'use client';

import { useSession, signIn } from 'next-auth/react';

// 定义props类型
interface ClientHomeProps {
  initialSession: Awaited<ReturnType<typeof import('@/auth').auth>>;
}

export default function ClientHome({ initialSession }: ClientHomeProps) {
  // 用initialSession作为初始值，首次渲染直接拿到数据
  const { data: session } = useSession({ initialSession });

  return (
    <div>
      {session ? (
        <div>
          <p>欢迎回来，{session.user?.name}!</p>
          {/* 这里放你的交互元素，比如用户设置按钮、登出按钮等 */}
        </div>
      ) : (
        <button onClick={() => signIn()}>立即登录</button>
      )}
    </div>
  );
}

方案优势 #

• 避开纯服务端组件的限制：仅父页面用服务端组件做数据预取，交互逻辑全部放在客户端子组件，完全保留页面交互性。
• 无需加载态：客户端组件首次渲染就有会话数据，避免空白或加载提示的体验问题。
• 符合Next Auth v5用法：直接用服务端auth()函数获取会话，不需要额外开发API接口，也不用依赖客户端fetch()。

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