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 请求问题。

相关推荐
90后的晨仔23 分钟前
Mac 上配置多个 Gitee 账号的完整教程
前端·后端
少年阿闯~~1 小时前
CSS——实现盒子在页面居中
前端·css·html
开发者小天1 小时前
uniapp中封装底部跳转方法
前端·javascript·uni-app
阿波罗尼亚1 小时前
复杂查询:直接查询/子查询/视图/CTE
java·前端·数据库
goTsHgo1 小时前
Spring XML 配置简介
xml·java·spring
正义的大古1 小时前
OpenLayers地图交互 -- 章节九:拖拽框交互详解
前端·vue.js·openlayers
三十_A2 小时前
【实录】使用 Verdaccio 从零搭建私有 npm 仓库(含完整步骤及避坑指南)
前端·npm·node.js
疯癫的老码农2 小时前
【word解析】Java文件解析问题排查:无法找到OMML2MML.xsl的IO异常解析
java·开发语言·spring boot·spring·maven
huangql5202 小时前
从零到一打造前端内存监控 SDK,并发布到 npm ——基于 TypeScript + Vite + ECharts的解决方案
前端·typescript·echarts
weixin_456904272 小时前
离线下载npm包
前端·npm·node.js