Next.js与next-auth：如何处理基于用户认证状态的动态导航栏？

方案1：用占位元素锁定布局空间 #

会话加载时不要直接隐藏元素，而是渲染一个和目标元素尺寸一致的占位容器，确保导航栏的布局结构保持稳定。针对你的代码，修改示例如下：

const Navbar: React.FC = () => {
  const { status } = useSession()

  // 匹配真实元素尺寸的占位组件
  const LoadingPlaceholder = () => (
    <div className="flex items-center gap-1">
      <div className="w-8 h-8 rounded-md bg-gray-200 dark:bg-gray-700"></div>
      <div className="w-12 h-8 rounded-md bg-gray-200 dark:bg-gray-700"></div>
    </div>
  )

  return (
    <header className="fixed top-0 z-10 w-full select-none backdrop-blur-sm">
      <nav className="relative flex items-center justify-between gap-2 p-2 md:px-[3rem] lg:px-[5rem] xl:px-[15rem] 2xl:px-[24rem]">
        {status === 'loading' ? <div className="w-6 h-6"></div> : <MobileMenu />}
        <div className="hidden items-center gap-1 md:flex">
          <MyLink
            href="/"
            icon={<HiBookOpen className="icon" />}
            className="flex items-center gap-1 font-bold"
          >
            Archives
          </MyLink>
        </div>
        <div className="flex items-center gap-1">
          {status === 'loading' ? <div className="w-32 h-8 rounded-md bg-gray-200 dark:bg-gray-700"></div> : <SearchBar />}
          {status === 'loading' ? <LoadingPlaceholder /> : (
            <>
              <ThemeToggler />
              <DesktopMenu />
            </>
          )}
        </div>
      </nav>
    </header>
  )
}

方案2：渲染所有元素，用CSS控制可见性 #

不管会话状态是否加载，都渲染所有导航元素，仅在loading阶段用CSS隐藏元素但保留布局空间，避免DOM结构变化导致的偏移：

const Navbar: React.FC = () => {
  const { status } = useSession()
  const isLoading = status === 'loading'

  return (
    <header className="fixed top-0 z-10 w-full select-none backdrop-blur-sm">
      <nav className="relative flex items-center justify-between gap-2 p-2 md:px-[3rem] lg:px-[5rem] xl:px-[15rem] 2xl:px-[24rem]">
        <MobileMenu className={`${isLoading ? 'opacity-0 invisible' : ''}`} />
        <div className="hidden items-center gap-1 md:flex">
          <MyLink
            href="/"
            icon={<HiBookOpen className="icon" />}
            className="flex items-center gap-1 font-bold"
          >
            Archives
          </MyLink>
        </div>
        <>
          <SearchBar className={`${isLoading ? 'opacity-0 invisible' : ''}`} />
          <div className="flex items-center gap-1 ">
            <ThemeToggler className={`${isLoading ? 'opacity-0 invisible' : ''}`} />
            <DesktopMenu className={`${isLoading ? 'opacity-0 invisible' : ''}`} />
          </div>
        </>
      </nav>
    </header>
  )
}

注：opacity-0 invisible是Tailwind类，对应原生CSS为opacity: 0; visibility: hidden;，仅隐藏视觉效果，不占用的布局空间会被保留。

方案3：服务器端预获取会话状态 #

通过服务器端提前获取会话状态，让客户端渲染导航栏时直接拿到认证结果，完全消除loading阶段：

Pages Router 示例 #

在_app.tsx中通过getServerSideProps获取会话：

import { getServerSession } from "next-auth/next"
import { authOptions } from "../api/auth/[...nextauth]"
import { SessionProvider } from "next-auth/react"

function MyApp({ Component, pageProps, session }) {
  return (
    <SessionProvider session={session}>
      <Navbar />
      <Component {...pageProps} />
    </SessionProvider>
  )
}

export async function getServerSideProps(context) {
  const session = await getServerSession(context.req, context.res, authOptions)
  return {
    props: { session }
  }
}

export default MyApp

此时Navbar无需判断loading状态：

const Navbar: React.FC = () => {
  const { status } = useSession()

  return (
    <header className="fixed top-0 z-10 w-full select-none backdrop-blur-sm">
      <nav className="relative flex items-center justify-between gap-2 p-2 md:px-[3rem] lg:px-[5rem] xl:px-[15rem] 2xl:px-[24rem]">
        <MobileMenu />
        <div className="hidden items-center gap-1 md:flex">
          <MyLink
            href="/"
            icon={<HiBookOpen className="icon" />}
            className="flex items-center gap-1 font-bold"
          >
            Archives
          </MyLink>
        </div>
        <>
          <SearchBar />
          <div className="flex items-center gap-1 ">
            <ThemeToggler />
            <DesktopMenu />
          </div>
        </>
      </nav>
    </header>
  )
}

App Router 示例 #

将Navbar设为Server Component，直接在组件内获取会话：

// app/components/Navbar.tsx
import { getServerSession } from "next-auth"
import { authOptions } from "@/app/api/auth/[...nextauth]"

export default async function Navbar() {
  const session = await getServerSession(authOptions)

  return (
    <header className="fixed top-0 z-10 w-full select-none backdrop-blur-sm">
      <nav className="relative flex items-center justify-between gap-2 p-2 md:px-[3rem] lg:px-[5rem] xl:px-[15rem] 2xl:px-[24rem]">
        <MobileMenu />
        <div className="hidden items-center gap-1 md:flex">
          <MyLink
            href="/"
            icon={<HiBookOpen className="icon" />}
            className="flex items-center gap-1 font-bold"
          >
            Archives
          </MyLink>
        </div>
        <>
          <SearchBar />
          <div className="flex items-center gap-1 ">
            <ThemeToggler />
            {session ? <UserMenu /> : <LoginButton />}
          </div>
        </>
      </nav>
    </header>
  )
}

内容的提问来源于stack exchange，提问作者Enzo Muñoz