Next.js API Routes缓存问题：基于NextAuth会话隐藏内容失效

核心问题分析 #

静态生成（SSG）页面会在构建阶段执行fetch并缓存结果，哪怕你的API路由配置了禁用缓存，SSG页面本身的缓存机制依然会保留构建时的响应，导致登录后无法获取最新的会话相关数据。

具体解决方法 #

1. 强制在客户端发起API请求 #

把SSG页面中调用API的逻辑移到客户端组件或useEffect中，确保每次页面加载时都从客户端发起请求，绕过SSG的构建缓存：

'use client';

import { useEffect, useState } from 'react';

export default function StaticPage() {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      const res = await fetch('/api/your-public-route', {
        // 显式禁用客户端缓存
        cache: 'no-store',
        // 带上Cookie确保会话被识别
        credentials: 'include'
      });
      const result = await res.json();
      setData(result);
    };

    fetchData();
  }, []);

  return <div>{data ? JSON.stringify(data) : 'Loading...'}</div>;
}

2. 给API请求添加唯一标识参数 #

在客户端请求API时，附加一个基于会话状态的唯一参数（比如会话ID的哈希，或者时间戳），迫使浏览器和CDN不缓存响应：

// 客户端请求逻辑
const session = await getSession(); // 从NextAuth获取会话
const res = await fetch(`/api/your-public-route?cache-bust=${session?.user?.id || Date.now()}`, {
  credentials: 'include'
});

API路由中可忽略这个缓存Bust参数，不影响业务逻辑。

3. 配置API路由的响应头强化缓存禁用 #

在你的route.ts中添加额外的响应头，彻底禁止任何层级的缓存：

// app/api/your-public-route/route.ts
import { getServerSession } from 'next-auth/next';
import { authOptions } from '../auth/[...nextauth]';

export const dynamic = 'force-dynamic';
export const revalidate = 0;
export const fetchCache = 'force-no-store';

export async function GET(request: Request) {
  const session = await getServerSession(authOptions);
  // 生成基于会话的数据
  const responseData = session ? { ...fullData } : { ...publicData };

  return new Response(JSON.stringify(responseData), {
    headers: {
      'Cache-Control': 'no-store, no-cache, must-revalidate, proxy-revalidate',
      'Pragma': 'no-cache',
      'Expires': '0'
    }
  });
}

4. 改用增量静态再生（ISR）配合按需刷新 #

如果必须保留部分静态内容，可以给页面配置ISR，并在用户登录/登出时触发页面重新生成：

// 页面组件
export const revalidate = 60; // 基础刷新间隔

// 在登录/登出的回调中调用revalidate API
async function handleLogin() {
  await signIn();
  // 触发页面重新生成
  await fetch(`/api/revalidate?path=/your-static-page`, { method: 'POST' });
}

该方法需要额外的revalidate API路由，但比新建业务路由工作量小。

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