Next.js中useEffect获取最新列表数据异常问题求助

这个问题的核心是Next.js生产环境默认会缓存API路由的响应，导致即使后端数据更新了，前端请求还是拿到构建时或首次请求的旧数据，而开发环境因为默认禁用缓存所以表现正常。以下是具体修复方法：

方法一：修改API路由，强制禁用缓存 #

在你的API路由文件中，给响应添加缓存控制头，明确告诉浏览器和CDN不要缓存该请求结果：

"use server";

import * as db from "../../../../lib/db"
import { NextRequest, NextResponse } from 'next/server';

export async function GET(req: NextRequest) {
    const list = await db.query(`
    SELECT id, name FROM "List"
    ORDER BY name ASC
    `, []);
    
    return NextResponse.json(list.rows, {
      headers: {
        // 禁用所有缓存，每次请求都重新拉取数据
        'Cache-Control': 'no-store, max-age=0',
        'Pragma': 'no-cache',
        'Expires': '0',
      },
    });
}

如果是Next.js 13+的App Router，还可以直接在API路由文件顶部添加配置，强制动态执行请求：

// 放在"use server"之后
export const dynamic = 'force-dynamic';

方法二：前端请求时禁用缓存 #

同时修改前端的fetch请求，明确指定不使用缓存，双重保险：

const getLists = async () => {
    const data = await fetch("/api/prospects/getLists/", {
      cache: 'no-store' // 强制跳过缓存，直接请求服务器
    });
    const json_data = await data.json();
    console.log(json_data);
    setLists([...json_data]);
};

额外排查点 #

如果以上方法仍未解决问题，检查页面组件是否被静态生成：如果你的页面使用了generateStaticParams或者默认静态优化，需要改成动态页面，在页面组件文件顶部添加：

export const dynamic = 'force-dynamic';

这样就能确保每次刷新页面时，无论是API请求还是页面本身，都会拉取最新的数据库数据。

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