nextjs+react接口会请求两次?

解决 Next.js + React 接口重复请求问题

在 Next.js 应用中,你可能会遇到 API 请求被发送两次的情况。以下是常见原因和解决方案:

1. 开发模式下 StrictMode 的影响

原因

Next.js 默认启用 React 的 StrictMode,在开发环境下会故意渲染两次组件以帮助发现潜在问题。

解决方案

jsx 复制代码
// next.config.js
module.exports = {
  reactStrictMode: false, // 关闭严格模式
}

或者仅在生产环境构建时保留:

jsx 复制代码
// next.config.js
module.exports = {
  reactStrictMode: process.env.NODE_ENV === 'production',
}

2. useEffect 依赖项问题

错误示例

jsx 复制代码
useEffect(() => {
  fetch('/api/data'); // 会触发多次
});

正确做法

jsx 复制代码
useEffect(() => {
  const fetchData = async () => {
    const res = await fetch('/api/data');
    const data = await res.json();
    // 处理数据
  };

  fetchData();
}, []); // 空依赖数组确保只运行一次

3. 页面渲染和预取导致的重复请求

原因

Next.js 会自动预取页面链接,可能导致 API 被调用多次。

解决方案

jsx 复制代码
// 禁用特定链接的预取
<Link href="/some-page" prefetch={false}>
  不预取的链接
</Link>

4. 自定义 App 中的重复初始化

错误示例

jsx 复制代码
// _app.js
function MyApp({ Component, pageProps }) {
  fetch('/api/init'); // 会在每次路由变化时调用
  
  return <Component {...pageProps} />;
}

正确做法

jsx 复制代码
// _app.js
function MyApp({ Component, pageProps }) {
  useEffect(() => {
    fetch('/api/init');
  }, []); // 只运行一次

  return <Component {...pageProps} />;
}

5. API 路由缓存策略

在 API 路由中添加缓存头可以减少重复请求的影响:

js 复制代码
// pages/api/data.js
export default function handler(req, res) {
  res.setHeader('Cache-Control', 's-maxage=10, stale-while-revalidate=59');
  res.status(200).json({ data: 'your data' });
}

6. 使用请求去重库

安装 axios 并使用请求拦截器:

bash 复制代码
npm install axios
js 复制代码
import axios from 'axios';

const api = axios.create();
const pendingRequests = new Map();

api.interceptors.request.use(config => {
  const requestId = `${config.method}-${config.url}`;
  if (pendingRequests.has(requestId)) {
    return Promise.reject(new Error('Duplicate request'));
  }
  pendingRequests.set(requestId, true);
  config.requestId = requestId;
  return config;
});

api.interceptors.response.use(response => {
  const requestId = response.config.requestId;
  pendingRequests.delete(requestId);
  return response;
});

7. 检查浏览器插件

某些浏览器插件(如 React Developer Tools、Redux DevTools)可能会导致额外的请求,尝试在无痕模式下测试。

验证解决方案

  1. 检查网络请求是否仍然重复
  2. 确认只在生产环境下保留 StrictMode
  3. 确保所有 useEffect 都有正确的依赖数组

通过这些方法,你应该能够有效减少或消除 Next.js 应用中的重复 API 请求问题。

相关推荐
IT_陈寒26 分钟前
SpringBoot 3.x实战:5种高并发场景下的性能优化秘籍,让你的应用快如闪电!
前端·人工智能·后端
麦文豪(victor)38 分钟前
自动化流水线
前端
JarvanMo2 小时前
Flutter. FractionallySizedBox
前端
知识分享小能手3 小时前
React学习教程,从入门到精通, React 入门指南:React JSX 语法知识点详解及案例代码(8)
前端·javascript·vue.js·学习·react.js·前端框架·anti-design-vue
卓码软件测评3 小时前
第三方web测评机构:【WEB安全测试中HTTP方法(GET/POST/PUT)的安全风险检测】
前端·网络协议·安全·web安全·http·xss
学习3人组3 小时前
React 组件基础与事件处理
前端·javascript·react.js
qczg_wxg7 小时前
React Native的动画系统
javascript·react native·react.js
漂流瓶jz8 小时前
解锁Babel核心功能:从转义语法到插件开发
前端·javascript·typescript
周小码9 小时前
shadcn-table:构建高性能服务端表格的终极解决方案 | 2025最新实践
前端·react.js
大怪v9 小时前
老乡,别走!Javascript隐藏功能你知道吗?
前端·javascript·代码规范