如何防止Next.js App Router页面缓存？已尝试多方案仍失效

你已经尝试了revalidate: 0、dynamic: 'force-dynamic'和响应头设置，但路由切换时仍无法重新获取数据，以下是针对性的修复方案：

1. 强化服务器组件的Fetch缓存策略 #

在页面组件（app/users/page.tsx）中添加fetchCache配置，强制禁用所有fetch缓存：

// app/users/page.tsx
export const revalidate = 0;
export const dynamic = 'force-dynamic';
// 新增：强制禁用服务器组件的fetch缓存
export const fetchCache = 'force-no-store';

2. 修正Fetch工具函数的缓存配置 #

在lib/fetchData.ts的fetchWithAuth函数中，调整fetch选项，明确使用cache: 'no-store'，移除请求头中不必要的缓存控制字段（服务器端fetch的请求头不影响Next.js的缓存策略）：

async function fetchWithAuth(url: string, options: RequestInit = {}): Promise<Response> {
    const sessionCookie = cookies().get('session')?.value;

    const headers = {
        ...options.headers,
        cookie: `session=${sessionCookie || ''}`,
        // 移除这里的Cache-Control、Pragma、Expires字段
    };

    const fetchOptions: RequestInit = {
        ...options,
        headers,
        // 明确禁用缓存，优先级高于next.revalidate
        cache: 'no-store',
        next: { revalidate: 0 },
    };

    return await fetch(url, fetchOptions);
}

3. 确保Appwrite客户端每次请求都重新初始化 #

检查createAdminClient函数，确保它每次调用都创建新的客户端实例，避免复用模块级别的缓存实例：

// 正确示例（每次调用新建客户端）：
export function createAdminClient() {
    const client = new Client()
        .setEndpoint(process.env.NEXT_PUBLIC_APPWRITE_ENDPOINT!)
        .setProject(process.env.NEXT_PUBLIC_APPWRITE_PROJECT!)
        .setKey(process.env.APPWRITE_ADMIN_KEY!);
    return { databases: new Databases(client) };
}

4. 禁用页面预加载（针对客户端路由切换） #

如果使用Link组件跳转至该页面，添加prefetch={false}避免Next.js预加载缓存页面：

<Link href="/users" prefetch={false}>用户管理</Link>

5. 验证API路由的缓存配置 #

在API路由（app/api/private/users/fetch-users/route.ts）中添加fetchCache配置：

export const dynamic = 'force-dynamic';
export const revalidate = 0;
// 新增：强制API路由不缓存
export const fetchCache = 'force-no-store';

额外排查点 #

• 检查是否有CDN或反向代理（如Vercel Edge Network）缓存了响应，确保CDN的缓存策略与你的Cache-Control响应头一致。
• 开发环境中，打开浏览器开发者工具→Network→勾选"Disable cache"测试，避免浏览器本地缓存干扰。

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