NextJS 13集成NextAuth会话时UI闪烁问题求助

刷新页面时，NextAuth的useSession会在会话数据加载完成前返回undefined，直接根据session是否存在渲染不同UI，就会导致页面先显示“未登录”再切换到“已登录”的闪烁问题。以下是两种有效解决方案：

1. 利用useSession的status状态处理加载过程 #

useSession返回的status字段会明确当前会话状态：loading（加载中）、authenticated（已认证）、unauthenticated（未认证）。我们可以在加载状态时显示加载占位，避免直接跳转到未登录UI。

修改后的Auth页面代码：

import { useSession, signIn, signOut } from "next-auth/react"

export default function Component() {
  const { data: session, status } = useSession()

  // 加载状态时显示占位内容，比如加载提示或骨架屏
  if (status === "loading") {
    return <div>加载中...</div>
  }

  if (session) {
    return <>
      已登录为 {session.user.email} <br/>
      <button onClick={() => signOut()}>退出登录</button>
    </>
  }
  
  return <>
    未登录 <br/>
    <button onClick={() => signIn()}>登录</button>
  </>
}

2. 服务端预取会话数据（App Router优化） #

在RootLayout中通过getServerSession预取会话，让服务端渲染时就拿到会话数据，传递给SessionProvider后，客户端初始化时直接拥有会话信息，从根源减少加载等待导致的闪烁。

修改后的RootLayout代码（需确保是服务器组件，不要加"use client"）：

import { getServerSession } from "next-auth/next"
import { authOptions } from "@/app/api/auth/[...nextauth]/route" // 替换为你的authOptions实际路径
import { SessionProvider } from "next-auth/react"

export default async function RootLayout({ children }) {
  // 服务端预取会话
  const session = await getServerSession(authOptions)
  
  return (
    <html>
      <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      </head>
      <body>
        <SessionProvider session={session}>
            <Header />
            {children}
        </SessionProvider>
      </body>
    </html>
  )
}

这两种方案结合使用，既能在加载过程中给用户明确反馈，又能通过服务端预取减少客户端加载时长，彻底解决UI闪烁问题。

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