Next.js 13：登录后SSR组件UserInfoBar状态不更新的问题求助

你的问题核心是客户端导航时Server Component缓存未更新：当用router.push跳转首页时，Next.js会复用之前缓存的UserInfoBar组件内容，没有重新在服务端读取最新的session cookie，所以依然显示Sign In，只有刷新页面才会触发服务端重新渲染。

下面是两个不需要改成客户端组件的服务端解决方案：

方案一：登录成功后清除首页缓存 #

在登录页的登录处理逻辑中，设置完session cookie后，调用revalidatePath强制清除首页的Server Component缓存，这样客户端导航回首页时会重新从服务端获取最新的组件内容。

示例代码（登录页的处理函数）：

import { revalidatePath } from 'next/cache';
import { cookies } from 'next/headers';
import { useRouter } from 'next/navigation';
import jwt from 'jsonwebtoken';

export default function SignInPage() {
  const router = useRouter();

  async function handleLogin(formData: FormData) {
    // 这里是你的用户验证逻辑，比如查询数据库
    const user = { username: 'testuser' };
    
    // 生成session token并设置cookie
    const token = jwt.sign(user, process.env.ACCESS_TOKEN_SECRET!);
    cookies().set('session', token, { httpOnly: true, secure: process.env.NODE_ENV === 'production' });
    
    // 清除首页的缓存，强制重新渲染
    revalidatePath('/');
    
    // 跳转首页
    router.push('/');
  }

  return (
    <form action={handleLogin}>
      {/* 登录表单内容 */}
      <button type="submit">登录</button>
    </form>
  );
}

方案二：强制UserInfoBar动态渲染 #

给UserInfoBar组件添加动态渲染配置，让Next.js每次请求都重新在服务端渲染该组件，不使用缓存，这样就能读取到最新的session cookie。

修改src/app/components/UserInfoBar.tsx，添加dynamic导出：

import React from 'react'
import Link from 'next/link'
import { getSession } from '../../lib/session'

// 强制组件每次都从服务端动态渲染，禁用缓存
export const dynamic = 'force-dynamic';

export default async function UserInfoBar() {
    let sessionData = getSession();

    console.log('on the server')
    console.log(sessionData)

    return (
        <div className="flex-grow text-right px-2 py-1 text-white">
            {sessionData ?
                sessionData.username :
                <Link href="/signin" className='px-2 py-1 text-white '>Sign In</Link>}
        </div>
    )
}

两种方案都能解决问题：方案一更高效（只在登录后清除缓存），方案二更直接（确保组件始终读取最新状态），你可以根据需求选择。

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