生产环境中useEffect会执行两次吗？NextJS部署配置疑问

生产环境无需额外配置 #

在Next.js的生产环境中，useEffect不会触发两次执行——这个重复执行的行为只在开发环境的React严格模式下存在，目的是帮你提前检测组件里的副作用泄漏问题（比如没清理的定时器、订阅）。部署到生产后，React会自动关闭这个严格模式的校验逻辑，你的API调用只会执行一次，不需要额外做配置。

开发环境解决两次API调用的临时办法 #

要是开发阶段不想看到重复的API请求，可以临时关闭React严格模式：

• 用Pages Router的话：修改next.config.js，把reactStrictMode设为false

module.exports = {
  reactStrictMode: false,
}

• 用App Router的话：在根布局组件layout.js里移除<StrictMode>的包裹，或者调整next.config.js里的相关配置

不过不建议长期关闭严格模式，它能帮你提前发现很多潜在的bug。

更适配Next.js的数据获取方案 #

其实Next.js本身提供了更高效的数据获取方式，比在useEffect里fetch更合适，还能从根源避免客户端重复请求：

1. Pages Router场景：

   • 要是需要每次请求都获取最新数据，用getServerSideProps——数据在服务器端获取后直接传给组件，客户端不用再发请求

   export async function getServerSideProps() {
     const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/collection/getCollections`)
     const data = await res.json()
     return { props: { collections: data.collections } }
   }
   
   function YourComponent({ collections }) {
     // 直接用collections就行，不用写useEffect
     return <div>{/* 渲染你的内容 */}</div>
   }
   
   export default YourComponent
   

   • 要是数据可以静态生成，用getStaticProps，构建阶段就把数据拉取好，后续请求直接复用静态资源

2. App Router场景：

   • 在服务器组件里直接用fetch，Next.js会自动缓存请求结果，不会重复调用
   • 要是在客户端组件里用fetch，可以加上cache: 'force-cache'（默认就是这个配置），或者用revalidate设置缓存过期时间

   // 客户端组件内的写法
   useEffect(() => {
     async function getData() {
       const res = await fetch('/api/collection/getCollections', { cache: 'force-cache' })
       const data = await res.json()
       setData(data.collections)
     }
     getData()
   }, [])
   

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