Next.js中是否应弃用Axios改用Fetch？数据请求工具选择咨询

云原生阿岚

2026-7-6

Next.js 数据请求方案与工具选择

Axios vs Fetch：实际开发中的选择

不是非此即彼，得看场景：

如果你习惯Axios的便捷性，完全可以继续用。Next.js中，服务器组件里使用Axios时，Next.js会自动对请求结果做缓存，不会出现重复请求问题；如果是客户端组件，可以给Axios加拦截器实现内存缓存或localStorage缓存，或者配合状态管理工具来管控缓存。
用Fetch的话，Next.js对原生Fetch做了增强，默认GET请求启用force-cache策略，能自动避免重复请求。嫌Fetch繁琐的话，自己封装一个工具函数就能解决手动转JSON、统一请求头的问题，用起来和Axios一样顺手（示例代码见下文）。

服务器组件直接请求
这是Next.js推荐的方式，不管用Fetch还是Axios，服务器端请求的结果会被Next.js自动缓存（可通过cache配置调整策略，比如no-store禁用缓存），数据可以直接传递给客户端组件，减少客户端的请求次数，避免重复请求问题。
客户端组件请求
- 封装Fetch工具函数：把重复的请求头设置、JSON解析、错误处理逻辑封装起来，示例：
```
// utils/fetchHelper.js
export async function fetchHelper(url, options = {}) {
  const config = {
    headers: {
      'Content-Type': 'application/json',
      ...options.headers
    },
    ...options
  };
  
  const res = await fetch(url, config);
  if (!res.ok) throw new Error(`HTTP error! Status: ${res.status}`);
  
  const contentType = res.headers.get('content-type');
  return contentType?.includes('application/json') ? res.json() : res.text();
}
```
  使用时只需调用const data = await fetchHelper('/api/posts')，和Axios体验一致。
- 配合状态管理工具：用TanStack Query（原React Query）或SWR，不管是Fetch还是Axios都能集成。它们会自动处理缓存、重复请求、加载/错误状态、重新验证等，比原生Fetch的缓存功能强大得多。

不能。Fetch的缓存是HTTP层面的基础缓存，仅能处理GET请求的静态缓存，无法应对复杂场景：

TanStack Query提供的是数据状态管理，除了缓存，还能解决数据同步、乐观更新、依赖请求等问题，中大型项目几乎都会用它来简化数据请求逻辑。即使你用Fetch，配合TanStack Query能大幅提升开发效率和用户体验。

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