Next.js 13生产构建后Axios调用无法获取Strapi最新API数据

你的核心问题是Next.js 13 app目录下的page.tsx默认采用静态生成（SSG）模式，生产构建时会执行一次服务端的API请求并缓存结果，后续访问页面直接复用缓存数据，而非每次请求都重新调用Strapi API。你在Axios请求头里设置的cache: "no-store"无法影响Next.js的路由缓存逻辑，因为这是Next.js层面的静态渲染策略，和HTTP请求头无关。

解决方法 #

方案1：强制页面动态渲染（推荐）

在page.tsx文件顶部添加配置，直接禁用静态缓存，让页面每次访问都重新执行服务端代码并请求API：

// app/page.tsx
import axiosInstance from '@/lib/axios';

// 关键配置：强制页面每次请求都动态生成，禁用静态缓存
export const dynamic = "force-dynamic";

async function fetchStrapiData() {
  const response = await axiosInstance.get('/你的Strapi接口路径');
  return response.data;
}

export default async function Home() {
  const data = await fetchStrapiData();
  
  return (
    <div>
      {/* 渲染接口返回的数据 */}
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

同时修改你的Axios实例，移除无效的cache请求头：

// lib/axios.js
import axios from 'axios';

const axios_instance = axios.create({
  baseURL: process.env.BACKEND_API_URL,
  timeout: 1000,
  headers: {
    Authorization: `Bearer ${process.env.STRAPI_BEARER_TOKEN}`,
    // 移除这里的cache配置，对Next.js路由缓存无作用
  },
});

export default axios_instance;

方案2：仅禁用数据获取函数的缓存

如果不想整个页面都动态渲染，可在数据获取函数中单独禁用缓存：

// app/page.tsx
import axiosInstance from '@/lib/axios';
import { unstable_noStore as noStore } from 'next/cache';

async function fetchStrapiData() {
  // 禁用当前函数的缓存，确保每次调用都重新请求API
  noStore();
  const response = await axiosInstance.get('/你的Strapi接口路径');
  return response.data;
}

export default async function Home() {
  const data = await fetchStrapiData();
  
  return (
    <div>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

原理说明 #

Next.js 13 app目录下的组件默认是静态渲染：生产构建时会执行所有异步数据逻辑，将结果打包进静态资源，后续访问无需再运行服务端代码。通过dynamic: "force-dynamic"或noStore()，可以强制页面/函数进入**动态渲染（SSR）**模式，每次用户访问时都会重新执行服务端代码并请求API，确保获取最新数据。

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