Next.js生产环境缓存问题：新增餐品无法实时在前端显示

项目背景 #

• 开发的大学项目：带管理员功能的小型餐厅页面，管理员可添加餐品并同步到前端
• 技术栈：Next.js + Prisma.io + Postgres，API采用Next.js内置API实现
• 核心逻辑：餐品归属于对应分类，例如"Tacos"分类下包含"Chicken Tacos"、"Beef Tacos"等
• 开发模式下所有功能（数据库连接、查询、餐品管理等）均正常运行

问题现象 #

• 部署到生产环境后，查询请求被缓存：管理员新增餐品后，后台管理表格能正常显示新增内容，但客户端前端无法看到
• 直接通过Postman或Thunderclient访问API接口，返回的数据也不包含新增餐品
• 尝试更换node-postgres工具发起查询请求，数据仍未更新，表现为Next.js缓存了查询结果

关键代码片段 #

创建新餐品接口（/api/comidas） #

import { prismaExclude } from "@/utils";
import { NextResponse } from "next/server";
import prisma from "../db-connection";

export const POST = async (req: Request) => {
  try {
    const { nombreProducto, descripcion, precio, categoriaId, imageSrc } =
      (await req.json()) as ReqInputs;

    await prisma.producto.create({
      data: {
        nombreProducto,
        descripcion,
        precio,
        categoria: {
          connect: {
            id: categoriaId,
          },
        },
        imageSrc,
      },
    });

    return NextResponse.json(
      {
        message: "Comida created successfully",
      },
      { status: 201 }
    );
  } catch (error) {
    return NextResponse.json(
      {
        message: `Error trying to create a food: ${error}`,
      },
      { status: 500 }
    );
  }
};

获取含餐品的分类接口（/api/categorias/comidas） #

import { NextResponse } from "next/server";
import prisma from "../../db-connection";

export const GET = async () => {
  const categorias = await prisma.categoria.findMany({
    include: {
      Producto: true,
    },
  });

  return NextResponse.json({
    message: "Categorias retreived successfully",
    categorias,
  });
};

餐品数据获取Hook（新增后可正常刷新） #

import { ComidaFull } from "@/types";
import { useQuery } from "react-query";

export default function useComidas() {
  const { data, refetch } = useQuery<{
    message: string;
    comidas: ComidaFull[];
  }>(["comidas"], getComidas);

  return {
    comidas: data?.comidas,
    reloadComidas: refetch,
  };
}

export const getComidas = () => fetch("/api/comidas").then((res) => res.json());

含餐品的分类数据获取Hook（新增后无法刷新） #

import { CategoriaWithComida } from "@/types";
import { useQuery } from "react-query";

export default function useGetWithFoods() {
  const { data, refetch } = useQuery<{
    message: string;
    categorias: CategoriaWithComida[];
  }>(["categoria", "comida"], getCategoriaWithFood);

  return {
    categorias: data?.categorias,
    reloadCategoriasComidas: refetch,
  };
}

export const getCategoriaWithFood = () =>
  fetch("/api/categorias/comidas").then((res) => res.json());

已尝试的解决方案 #

• 更换Docker运行的Postgres数据库容器
• 将应用部署到Vercel，并使用Railway托管的Postgres数据库
• 替换Prisma，改用node-postgres直接发起数据库查询，问题依旧存在

期望结果 #

每次调用API接口都能获取最新的数据库数据，管理员新增餐品后，客户端前端能立即看到该餐品。

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