Next.js 14结合NextAuth时Fetch缓存失效问题及方案咨询

1. 请求未被缓存是否因token导致其动态化？ #

是的，核心原因有两点：

• 你调用了getServerSession()，这个方法会让整个页面进入动态渲染模式（Next.js会为每个请求生成页面），动态页面中fetch的默认缓存策略是cache: 'no-store'，即使你设置了next: { revalidate: 3600 }也会被忽略。
• 每个用户的token不同，请求头里的Authorization字段会成为缓存键的一部分，即使强制缓存，每个用户的响应也会被单独存储，不会共享，但前提是你要覆盖默认的缓存策略。

2. 这种情况下使用Next.js缓存的推荐方案是什么？ #

针对用户专属数据的缓存，推荐以下两种方案：

方案一：强制开启缓存并添加用户专属标签 #

修改fetch配置，显式设置cache: 'force-cache'覆盖动态页面的默认策略，同时添加用户专属缓存标签，方便后续主动刷新：

const getData2 = async () => {
  const userId = session?.user?.data?.id; // 假设你的session中包含用户ID
  const res = await fetch(supplier.COMPANIES_BY_USER, {
    headers: {
      Authorization: `Bearer ${token}`,
    },
    cache: 'force-cache', // 强制开启缓存
    next: { 
      revalidate: 3600, // 1小时后自动失效
      tags: [`user-companies-${userId}`] // 用户专属缓存标签
    },
  });
  return res.json();
};

如果需要主动刷新某个用户的缓存，可以在API路由中调用revalidateTag(user-companies-${userId})触发更新。

方案二：封装独立的数据获取函数 #

把数据获取逻辑抽成单独的服务器端函数，集中管理缓存策略，提升代码复用性：

// app/lib/data.ts
import { authOptions } from "@/app/api/auth/[...nextauth]/route";
import { getServerSession } from "next-auth";
import { supplier } from "@/app/endpoints/suppliers/suppliers";

export async function getUserCompanies() {
  const session = await getServerSession(authOptions);
  const token = session?.user?.data?.token;
  const userId = session?.user?.data?.id;

  const res = await fetch(supplier.COMPANIES_BY_USER, {
    headers: { Authorization: `Bearer ${token}` },
    cache: 'force-cache',
    next: { revalidate: 3600, tags: [`user-companies-${userId}`] }
  });

  if (!res.ok) throw new Error('获取公司列表失败');
  return res.json();
}

之后在页面中直接调用该函数：

// app/my-companies/page.tsx
import MyCompanies from "./container/MyCompanies/MyCompanies";
import { getUserCompanies } from "@/app/lib/data";

const MyCompaniesPage = async () => {
  const companies = await getUserCompanies();
  return <div><MyCompanies data={companies || []} /></div>;
};

export default MyCompaniesPage;

3. 依赖用户token的请求是否值得缓存？ #

是否缓存取决于数据的更新频率和业务需求：

• 值得缓存的场景：如果用户的公司列表更新不频繁（比如每天/几小时更新一次），缓存能大幅减少外部API请求量，提升页面加载速度，同时降低服务器压力。
• 谨慎缓存的场景：如果数据实时性要求高（比如用户刚修改公司信息就需要立即看到），可以设置极短的revalidate时间（比如60秒），或者在数据更新后主动调用revalidateTag刷新缓存。
• 注意：用户专属数据的缓存是独立的，不会出现不同用户数据混淆的问题，因为缓存键包含了用户标识（请求头的token或自定义的用户ID标签）。

4. Fetch请求更适合直接写在.page.tsx中，还是放在服务器组件中再传递数据给展示组件？ #

推荐将数据获取逻辑抽离到单独的服务器组件或数据函数中，原因如下：

• 分离关注点：页面组件只负责渲染UI，数据逻辑单独维护，代码结构更清晰。
• 复用性：如果其他页面或组件需要相同的数据，可以直接复用这个函数/组件。
• 可测试性：单独的数据函数更容易编写单元测试，验证数据获取逻辑。
• 当然，如果页面逻辑简单，直接写在page.tsx中也可以，但抽离是更符合工程化的做法。

内容的提问来源于stack exchange，提问作者John Pérez