如何解决Next.js中使用Axios时的缓存问题

你的问题核心是Next.js App Router对服务端组件的请求默认启用了缓存机制，即便用Axios发起请求，结果也会被缓存，导致第二次跳转回编辑页时，需要等待缓存过期才能获取最新数据。下面是几个针对性的解决方案，都能保留Axios的使用：

方案一：给Axios请求添加缓存控制头 #

直接在请求配置中添加Cache-Control: no-store头，明确告诉Next.js不要缓存该请求的结果：

const getData = async (categoryId: string) => {
    return await Api.get('/store/category', {
        params: {
            categoryId
        },
        headers: {
            'Cache-Control': 'no-store' // 强制禁用缓存
        }
    });
}

如果需要全局对所有接口请求禁用缓存，可以在Axios实例的请求拦截器中统一配置：

// 在@/utils/Api的初始化文件中
import axios from 'axios';

const Api = axios.create({
    // 你的基础配置（如baseURL等）
});

// 添加请求拦截器
Api.interceptors.request.use(config => {
    // 对所有请求添加禁用缓存的头
    config.headers['Cache-Control'] = 'no-store';
    return config;
});

export { Api };

方案二：页面级禁用缓存 #

在编辑页组件中添加revalidate配置，强制该页面每次访问都重新获取数据，不依赖缓存：

import { Api } from "@/utils";
import { EditCategoryLayout } from "./@root";
import { notFound } from "next/navigation";

type PageProps = {
    params: {
        categoryId: string
    },
    searchParams: {}
}

// 添加这行，设置页面始终重新验证，不缓存
export const revalidate = 0;

const getData = async (categoryId: string) => {
    return await Api.get('/store/category', {
        params: {
            categoryId
        }
    });
}

export default async function DashboardEditCategory(props: PageProps) {
    const { categoryId } = props.params;

    const req = await getData(categoryId);

    if (req.status !== 200 || req.data.error) notFound();

    return (
        <EditCategoryLayout id={categoryId} {...req.data as any} />
    )
}

方案三：添加唯一参数绕过缓存（临时方案） #

如果上述方法无法生效，可以给请求URL添加一个随时间变化的参数，让每次请求的URL唯一，从而绕过缓存：

const getData = async (categoryId: string) => {
    return await Api.get('/store/category', {
        params: {
            categoryId,
            t: Date.now() // 添加时间戳参数，确保每次请求URL不同
        }
    });
}

这个方法不需要修改缓存配置，但会增加URL的复杂度，适合临时场景使用。

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