Next.js 13.5+ App Router中禁用Server Component页面浏览器缓存

你的问题核心是浏览器缓存了未登录状态的页面内容，导致登录后返回时直接读取缓存，没有向服务器请求最新状态。可以通过以下方式禁用该页面的浏览器缓存：

1. 添加缓存控制响应头 #

在你的Profile页面文件中，导出headers函数设置禁止缓存的HTTP响应头，强制浏览器每次都请求最新页面：

import Link from 'next/link';
import { cookies } from 'next/headers';
import getTokenData from '@/helper/token';

// 设置缓存控制头
export async function headers() {
  return {
    'Cache-Control': 'no-store, no-cache, must-revalidate, proxy-revalidate',
    Pragma: 'no-cache',
    Expires: '0',
  };
}

const ProfilePage = ({ params }) => {
  const incomingToken = cookies()?.get('token')?.value;
  const tokenDecode = getTokenData(incomingToken);

  if (tokenDecode.success && tokenDecode?.data?.isAdmin) {
    return (
      <Frame>
        // 管理员组件内容
      </Frame>
    );
  }

  if (tokenDecode.success) {
    return (
      <Frame>
        // 普通用户组件内容
      </Frame>
    );
  }

  return (
    <Frame>
      // 登录链接组件内容
    </Frame>
  );
};

export default ProfilePage;

这些响应头的作用：

• no-store：完全禁止浏览器和中间代理缓存页面内容
• no-cache：强制浏览器每次使用缓存前向服务器验证有效性
• must-revalidate：缓存内容必须重新验证后才能使用
• proxy-revalidate：要求代理服务器也重新验证缓存
• Pragma: no-cache：兼容HTTP/1.0版本的浏览器
• Expires: 0：立即标记缓存内容过期

2. 强制页面动态渲染（可选） #

如果页面被Next.js自动静态优化，可添加以下配置强制动态渲染，确保每次请求都由服务器处理：

// 在页面文件中添加
export const dynamic = 'force-dynamic';

这个设置会让页面每次请求都从服务器获取最新状态，避免静态缓存的干扰。

3. 验证效果 #

修改完成后，登录后返回Profile页面时，浏览器会自动请求服务器获取最新内容，根据Cookie中的token渲染对应页面，无需手动刷新。

内容的提问来源于stack exchange，提问作者Xenon M. Bird