在 Next.js 14 App Router 中，使用 fetch 调用带 .sort() 的 MongoDB 查询时，开发环境正常但生产构建（如 Vercel）后数据不实时更新，根本原因是服务端缓存未正确失效；需结合 dynamic = "force-dynamic"、cache: "no-store" 和防缓存参数等多重策略确保每次请求获取最新排序数据。
在 next.js 14 app router 中，使用 `fetch` 调用带 `.sort()` 的 mongodb 查询时，开发环境正常但生产构建（如 vercel）后数据不实时更新，根本原因是服务端缓存未正确失效；需结合 `dynamic = "force-dynamic"`、`cache: "no-store"` 和防缓存参数等多重策略确保每次请求获取最新排序数据。
该问题本质并非 MongoDB 查询逻辑错误，而是 Next.js 构建后对服务端路由（尤其是 app/api/... 路由）的自动缓存行为与客户端 fetch 的缓存策略发生冲突，导致即使数据库已新增数据，API 响应仍返回旧快照——尤其在启用 .sort({ createdAt: -1 }) 后更易暴露此问题（因排序依赖时间戳，而缓存掩盖了新插入记录）。
✅ 正确解决方案（三重保障）
1. 在 API 路由文件顶部声明 dynamic = "force-dynamic"
这是最直接、最推荐的方式，强制该路由完全禁用服务端缓存，确保每次请求都执行完整逻辑（包括重新连接 DB、执行 find().sort()）：
// app/api/homepage/route.ts
export const dynamic = "force-dynamic"; // ? 关键：禁用整个路由缓存
import Review from "@/models/review";
import connectdb from "@/util/mongodb";
import { NextResponse } from "next/server";
export async function GET() {
await connectdb();
const reviews = await Review.find()
.sort({ createdAt: -1 }) // ✅ 排序保留
.select("_id title category rating image episodes")
.limit(6)
.exec();
return NextResponse.json({ data: reviews });
}⚠️ 注意：
dynamic = "force-dynamic"必须写在文件顶层（不能在函数内），且仅对app目录下的路由有效。
Comprehensive Three.js 3D graphics reference下载详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
2. 客户端调用时显式禁用 fetch 缓存
即使服务端已禁用缓存，客户端 fetch 仍可能受浏览器或中间代理影响。务必在调用侧补充 cache: "no-store" 并添加时间戳扰动（双重保险）：
// lib/api.ts
export default async function getLatestReview() {
try {
const api = process.env.API_URL;
const url = `${api}/api/homepage?_t=${Date.now()}`; // 防缓存查询参数
const response = await fetch(url, {
cache: "no-store", // ✅ 强制跳过浏览器/CDN缓存
next: { revalidate: 0 }, // 可选：进一步明确不复用
});
if (!response.ok) throw new Error(`HTTP ${response.status}`);
const { data } = await response.json();
return data;
} catch (error) {
console.error("Failed to fetch latest reviews:", error);
return [];
}
}3. 避免常见误区
- ❌ 不要仅依赖
cache: "no-store"而忽略服务端dynamic声明：Vercel 对app/api路由默认启用静态生成优化（ISR），fetch客户端设置无法覆盖服务端缓存。 - ❌ 不要将
revalidate: 0或revalidate: 3600误用于app/api路由：revalidate仅对app/[slug]/page.tsx等服务端组件有效，对 API 路由无效。 - ✅ 若需轻量级缓存（如每秒最多刷新一次），可改用
revalidate: 1+dynamic = "force-dynamic"组合，但本场景推荐彻底禁用以保实时性。
? 验证是否生效
部署后，可通过以下方式快速验证：
- 手动插入一条
createdAt为当前时间的新 review； - 刷新首页，观察新数据是否立即出现在列表顶部；
- 检查浏览器开发者工具 → Network → 查看
/api/homepage请求的Cache-Control响应头是否为no-store，且响应时间非from memory cache。
通过以上配置，即可在保持 .sort({ createdAt: -1 }) 功能的同时，确保构建后数据实时更新——既满足业务需求，又符合 Next.js 14 最佳实践。
