Next.js 13.5+ Vercel部署后Axios获取数据不更新问题求助

• 给请求添加禁用缓存的头
  Vercel和Next.js默认会对GET请求做静态缓存，给Axios请求带上禁用缓存的响应头，强制每次拉取最新数据：

  const [data, setData] = useState<any>();
  useEffect(() => {
    axios.get("/api/admin/getAllCategories", {
      headers: {
        'Cache-Control': 'no-store, no-cache, must-revalidate, max-age=0',
        'Pragma': 'no-cache',
        'Expires': '0'
      }
    }).then((res) => setData(res.data));
  }, []);
  

  这些头会告知服务器和浏览器不要缓存该请求结果，确保每次请求都直达后端获取最新数据。

• 拼接缓存破击参数
  在请求URL后面加上随机参数（比如时间戳），让每次请求的URL唯一，绕过缓存机制：

  const [data, setData] = useState<any>();
  useEffect(() => {
    axios.get(`/api/admin/getAllCategories?timestamp=${Date.now()}`)
      .then((res) => setData(res.data));
  }, []);
  

  也可以用项目版本号、哈希值替代时间戳，只要保证数据更新或部署后参数能变化即可。

• 全局配置Axios实例
  项目中多处使用Axios的话，直接全局配置禁用缓存，避免重复写头信息：

  // 比如在utils/axios.ts中创建全局实例
  import axios from 'axios';
  
  const axiosInstance = axios.create({
    baseURL: '/api',
    headers: {
      'Cache-Control': 'no-store, no-cache, must-revalidate, max-age=0',
      'Pragma': 'no-cache',
      'Expires': '0'
    }
  });
  
  export default axiosInstance;
  

  之后项目里所有请求都用这个实例，自动带上禁用缓存的头。

• 在API路由端设置缓存策略
  如果是自定义的Next.js API路由，直接在后端响应里设置缓存头，从源头杜绝缓存：

  // App Router 示例（app/api/admin/getAllCategories/route.ts）
  export async function GET() {
    const categories = await fetchCategoriesFromDB(); // 你的数据获取逻辑
    return new Response(JSON.stringify(categories), {
      headers: {
        'Cache-Control': 'no-store, no-cache, must-revalidate, max-age=0',
        'Pragma': 'no-cache',
        'Expires': '0'
      }
    });
  }
  
  // Pages Router 示例（pages/api/admin/getAllCategories.ts）
  export default async function handler(req, res) {
    const categories = await fetchCategoriesFromDB();
    res.setHeader('Cache-Control', 'no-store, no-cache, must-revalidate, max-age=0');
    res.setHeader('Pragma', 'no-cache');
    res.setHeader('Expires', '0');
    res.status(200).json(categories);
  }
  

• 手动触发重新请求
  如果需要在数据更新后（比如新增/修改分类）获取最新数据，把请求逻辑抽成独立函数，在需要时调用：

  const [data, setData] = useState<any>();
  
  const fetchCategories = async () => {
    const res = await axios.get("/api/admin/getAllCategories", {
      headers: { 'Cache-Control': 'no-store' }
    });
    setData(res.data);
  };
  
  useEffect(() => {
    fetchCategories();
  }, []);
  
  // 比如提交表单后重新拉取数据
  const handleSubmit = async (formData) => {
    await axios.post("/api/admin/addCategory", formData);
    fetchCategories();
  };
  

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