NextJS App Router布局中用户数据重复请求问题排查

问题原因 #

1. 开发环境Strict Mode的影响：React 18的Strict Mode会在开发环境中对组件执行两次渲染（包括异步组件），目的是提前检测潜在的副作用问题，这会导致你的getUser()被调用两次。这种情况仅存在于开发模式，生产环境会自动恢复正常。
2. 缺少数据缓存：即使没有Strict Mode，如果UserInfo组件被多次渲染（比如布局在多个路由层级复用）或组件重新渲染，getUser()也会重复执行，因为没有对数据获取结果做缓存处理。

解决方法 #

1. 缓存数据获取函数 #

使用React内置的cache函数包裹getUser，确保相同调用复用之前的结果，避免重复执行异步操作：

import { cache } from 'react';

export const getUser = cache(async () => {
  const employee = {
    name: "John Doe",
  };
  console.log("Fetching user data...");
  await new Promise((resolve) => setTimeout(resolve, 1000));
  return employee.name;
});

这样不管组件渲染多少次，getUser()只会在第一次调用时执行异步逻辑，后续调用直接返回缓存的结果。

2. 确认组件渲染次数 #

检查布局文件，确保UserInfo组件只被渲染一次，没有在其他地方重复引用。如果布局在多个路由层级嵌套使用，可通过调整路由结构或结合缓存避免重复请求。

额外说明 #

开发环境下Strict Mode的重复调用是React的设计特性，用于帮助开发者发现未清理定时器、重复订阅等副作用问题。如果getUser()是真实API请求，缓存后即使在开发环境也只会发起一次请求，不会影响开发体验。

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