Next.js生产环境中Mutate无法获取更新后数据的问题排查

生产环境下出现变更已存入数据库但前端表格不更新的问题，核心原因是API接口响应被缓存以及SWR的缓存策略在生产环境下的默认行为，以下是具体解决步骤：

1. 后端API路由添加缓存控制头 #

生产环境中Next.js会默认缓存GET接口的响应，需在后端接口中明确禁止缓存，同时修复原代码中catch块缺少返回的问题：

const mongoose = require('mongoose');

import { EstadoAdministrativo } from '@/models/estados';
import { NextResponse } from 'next/server';

export const GET = async (request) => {
    console.log('hola');
    try {
        const estados = await EstadoAdministrativo.find({});
        console.log(estados);
        return NextResponse.json({ estados }, {
            headers: {
                'Cache-Control': 'no-store, no-cache, must-revalidate, proxy-revalidate',
                'Pragma': 'no-cache',
                'Expires': '0',
            }
        });
    } catch (error) {
        return NextResponse.json("Fallo al cargar estados administrativos", { status: 500 });
    }
}

2. 优化前端SWR的mutate调用 #

调用mutate时明确强制重新验证，跳过缓存直接请求最新数据，同时添加await确保更新完成：

const actualizarEstado = async (data) => {
    try {
        const response = await axios.post('/api/estados/administrativos/upsert/', data);
        // 强制重新获取数据，跳过本地缓存
        await mutate('/api/estados/administrativos/lista', undefined, { revalidate: true });
    } catch (error) {
        console.error(error);
    }
};

3. 调整SWR实例的缓存策略 #

如果上述方法仍不生效，可在useSWR调用中关闭请求去重，避免短时间内复用旧请求：

const { data: estados, error } = useSWR('/api/estados/administrativos/lista', fetcher, {
    dedupingInterval: 0,
    revalidateOnFocus: true, // 可选：页面重新聚焦时自动验证数据
});

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