Next.js 13如何用Axios获取数据？官方是否推荐Fetch优先？

Next.js 13的Fetch API通过内置的cache和next.revalidate选项实现了灵活的服务端数据缓存控制，用Axios可以通过手动设置HTTP请求头来实现对应效果，具体如下：

1. 禁用缓存（对应fetch(..., { cache: 'no-store' })） #

要实现每次请求都重新获取数据，给Axios请求添加Cache-Control: no-store头即可：

import axios from 'axios';

async function getFreshData() {
  const res = await axios.get('https://your-api-endpoint', {
    headers: {
      'Cache-Control': 'no-store'
    }
  });
  return res.data;
}

如果是在服务器组件中，也可以通过导出revalidate: 0来全局禁用该组件的缓存，不过请求头设置更精准针对单个请求。

2. 定时重验证缓存（对应fetch(..., { next: { revalidate: 10 } })） #

要实现10秒后自动重新验证缓存，使用Cache-Control: s-maxage=10, stale-while-revalidate头，这和Next.js的revalidate逻辑本质一致：

import axios from 'axios';

async function getRevalidatedData() {
  const res = await axios.get('https://your-api-endpoint', {
    headers: {
      'Cache-Control': 's-maxage=10, stale-while-revalidate'
    }
  });
  return res.data;
}

同样，服务器组件中导出revalidate: 10也能让组件内所有请求遵循该缓存周期，请求头设置优先级更高。

3. 默认强制缓存（对应fetch(...)） #

Next.js服务器组件默认会缓存数据，和Fetch的force-cache默认行为一致。Axios默认不会设置特殊缓存头，直接发起请求即可：

import axios from 'axios';

async function getCachedData() {
  const res = await axios.get('https://your-api-endpoint');
  return res.data;
}

如果要明确指定，也可以添加Cache-Control: force-cache头。

Next.js官方更推荐使用原生Fetch API，核心原因：

• Fetch和Next.js的缓存系统深度集成，直接通过cache、next.revalidate选项配置即可，无需手动拼接HTTP头，写法更简洁。
• Fetch是浏览器和Node.js（v18+）原生支持的API，无需额外安装依赖，能减少项目打包体积。
• Next.js对Fetch做了增强优化，比如服务器端自动重试、请求去重等。

但Axios依然可以正常在Next.js中使用，如果你依赖Axios的拦截器、统一错误处理、请求取消等特性，只要手动配置对应缓存头，就能实现和Fetch一致的服务端渲染数据获取效果。

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