在useEffect中调用API更新后端数据是否为不良实践？NextJS静态页面场景下React严格模式重复调用接口的解决方案

我来帮你拆解这两个问题，结合React严格模式的设计初衷来分析：

1. 在useEffect中调用修改数据的API是否属于不良实践？ #

其实这不能一概而论，关键要看你的副作用是否符合React对可预测性的要求。

React严格模式在开发环境触发两次effect，核心目的是帮你发现那些「重复执行会导致意外结果」的不良副作用——比如如果你的updateViewCount接口是非幂等的（每次调用都直接给浏览量+1，没有去重逻辑），那开发环境里确实会出现统计数据不准的情况，但这本质上不是「在useEffect里调用修改API」的问题，而是你的操作不具备可重复性。

从最佳实践来说，页面加载时触发数据修改类操作（比如统计浏览量）是完全合理的，但要注意两点：

• 尽量让接口具备幂等性（比如后端基于用户IP+页面ID+时间窗口去重，或者用请求唯一标识过滤重复请求），这样即使重复调用也不会产生错误结果；
• 明确开发环境的重复调用是测试机制，不会影响生产数据（生产构建时严格模式会自动禁用）。

所以结论是：这本身不是不良实践，但要确保你的副作用是可预测、可重复的，尤其涉及数据修改时，优先保证接口幂等。

2. 除了关闭严格模式外，如何避免开发环境中接口被重复调用？ #

这里有几个实用的方案，按推荐程度排序：

方案一：让后端接口实现幂等性（最推荐） #

从根源解决问题，后端对同一页面、同一用户在短时间内的多次updateViewCount请求做去重处理。比如：

• 记录用户IP+页面ID的请求时间，1分钟内重复请求忽略；
• 前端请求时携带一个唯一标识（比如UUID），后端存储已处理的标识，重复请求直接返回结果不修改数据。

这样不管开发环境调用多少次，都不会导致统计数据异常，同时也能预防生产环境中的网络重试等场景带来的重复请求问题。

方案二：用Ref标记首次执行，跳过第二次调用 #

在开发环境里，用一个ref来记录effect是否已经执行过第一次，第二次触发时跳过API调用：

import { useEffect, useRef } from 'react';

// 在组件内使用
useEffect(() => {
  const isFirstRun = useRef(true);

  // 只在首次执行时调用接口
  if (isFirstRun.current) {
    backend.updateViewCount(pageId);
    isFirstRun.current = false;
    return;
  }
}, [pageId]);

这个方法简单直接，而且生产环境因为不会触发两次effect，所以只会执行一次，不会有问题。如果担心影响生产，可以加环境判断：

useEffect(() => {
  const isDev = process.env.NODE_ENV === 'development';
  const isFirstRun = useRef(true);

  if (!isDev || isFirstRun.current) {
    backend.updateViewCount(pageId);
    if (isDev) isFirstRun.current = false;
  }
}, [pageId]);

方案三：封装自定义Hook处理首次渲染副作用 #

可以封装一个只在组件首次挂载时执行的Hook，避免重复写判断逻辑：

import { useEffect, useRef } from 'react';

function useMountEffect(callback) {
  const isMounted = useRef(false);

  useEffect(() => {
    if (!isMounted.current) {
      callback();
      isMounted.current = true;
    }
    // 注意：这里如果callback有依赖，需要在Hook里处理，或者让调用方传递正确的依赖
  }, [callback]);
}

// 组件内使用
useMountEffect(() => {
  backend.updateViewCount(pageId);
});

使用这个Hook后，不管严格模式是否触发两次，都只会执行一次API调用。

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