Next.js部署Vercel后缓存未禁用，页面数据不更新的问题咨询

一、部署后数据不更新的原因 #

1. 服务器组件静态渲染：你的Match组件是异步服务器组件，Next.js App Router默认会对无动态依赖的服务器组件进行静态预渲染（SSG），部署时就生成静态页面，后续用户访问直接返回预渲染内容，不会重新执行组件内的数据库查询逻辑。
2. API路由静态化：/api/event路由未使用动态上下文（如request对象属性、headers()、cookies()等），Next.js会将其静态化，返回部署时的快照数据。即使你在fetch中设置cache: "no-store"也无效——服务器组件调用内部API路由时，Next.js会直接执行路由函数而非发起HTTP请求，fetch的缓存配置无法覆盖路由的静态化策略。
3. revalidatePath使用不当：你调用revalidatePath时指定的路径可能不正确，且静态页面的重新生成需要触发动态渲染逻辑，单纯调用revalidatePath无法让静态预渲染的页面实时更新。

二、实现每次加载请求数据库的方案 #

方案1：强制页面动态渲染 #

在Match组件所在的page.tsx中添加动态渲染配置，让服务器每次收到请求都重新执行组件逻辑：

// /app/match/page.tsx
import { EventsSchema, columns } from "./components/columns";
import { DataTable } from "@/app/match/components/data-table";

// 强制动态渲染，每次请求都执行组件代码
export const dynamic = "force-dynamic";

async function getData(): Promise<EventsSchema[]> {
  const data = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/event`).then((res) => res.json());
  return data;
}

export default async function Match() {
  // 也可通过调用动态函数（如headers()）触发动态渲染，无需手动设置dynamic
  // headers();
  const data = await getData();
  return <DataTable data={data} columns={columns} />;
}

方案2：让API路由变为动态 #

修改/api/event/route.ts，通过使用动态上下文或配置强制动态，避免路由被静态化：

// /app/api/event/route.ts
import { connectToDB } from "@/app/utils/database";
import Events from "@/models/events";

// 强制API路由动态执行，每次请求都查询数据库
export const dynamic = "force-dynamic";

export const GET = async (request: Request) => {
  // 也可通过使用request对象属性触发动态渲染，无需手动设置dynamic
  // request.headers.get('user-agent');
  try {
    await connectToDB();
    const events = await Events.find({}).select(
      "-_id -id -expireAt -homeNmae -awayName -competition"
    );
    return new Response(JSON.stringify(events), { status: 200 });
  } catch (error) {
    return new Response("Failed to fetch all events", { status: 500 });
  }
};

方案3：直接在服务器组件中查询数据库（推荐） #

跳过API路由，直接在服务器组件中执行数据库查询，更易控制缓存策略：

// /app/match/page.tsx
import { EventsSchema, columns } from "./components/columns";
import { DataTable } from "@/app/match/components/data-table";
import { connectToDB } from "@/app/utils/database";
import Events from "@/models/events";
import { unstable_noStore as noStore } from 'next/cache';

async function getData(): Promise<EventsSchema[]> {
  noStore(); // 禁用缓存，每次调用都重新查询数据库
  await connectToDB();
  const events = await Events.find({}).select(
    "-_id -id -expireAt -homeNmae -awayName -competition"
  );
  return events;
}

// 也可设置revalidate: 0实现每次请求重新获取
// export const revalidate = 0;

export default async function Match() {
  const data = await getData();
  return <DataTable data={data} columns={columns} />;
}

三、高并发场景下的优化方案 #

如果用户量较大，每次请求直接查询数据库会导致数据库连接耗尽、响应延迟甚至崩溃，可通过以下方式优化：

1. 数据库层优化 #

• 连接池复用：确保connectToDB实现了数据库连接池（MongoDB驱动默认支持连接池），避免每次请求创建新连接，减少数据库资源消耗。
• 缓存查询结果：用Redis缓存高频查询的events数据，设置合理的过期时间（如1分钟），大部分请求直接从Redis读取，仅缓存过期时查询数据库。
• 读写分离：如果读请求远多于写请求，配置数据库读写分离，将读请求导向从库，减轻主库压力。

2. Next.js应用层优化 #

• 增量静态再生（ISR）：如果数据不需要实时更新，设置revalidate参数实现定时更新，平衡数据新鲜度和服务器压力：

  // /app/match/page.tsx
  export const revalidate = 60; // 每60秒重新生成一次页面
  

• 边缘缓存：在API路由或页面中设置Cache-Control头，利用Vercel边缘网络缓存响应：

  // /app/api/event/route.ts
  export const GET = async () => {
    try {
      await connectToDB();
      const events = await Events.find({}).select(...);
      return new Response(JSON.stringify(events), {
        status: 200,
        headers: {
          'Cache-Control': 's-maxage=60, stale-while-revalidate=30'
        }
      });
    } catch (error) {
      return new Response("Failed to fetch all events", { status: 500 });
    }
  };
  

  该配置表示边缘节点缓存响应60秒，过期后后台异步更新缓存，用户仍能看到旧数据直到新缓存生成。

3. 负载均衡 #

• Vercel内置能力：Vercel提供全球边缘网络和自动负载均衡，会自动将用户请求分发到最近的边缘节点，无需额外配置。
• 数据库负载均衡：使用云服务商的托管数据库（如MongoDB Atlas、AWS RDS），这类服务自带自动扩容、负载均衡和故障转移能力，可应对高并发场景。

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