Next.js页面：如何避免浏览器标签页获焦时自动重载？

以下是几种解决标签页切换后页面重载、重复请求API数据的方案：

1. 控制客户端数据请求的重验证行为 #

如果使用客户端组件发起API请求，推荐用SWR或React Query这类数据缓存库，通过配置关闭焦点切换时的自动重验证：

• 以SWR为例，添加revalidateOnFocus: false参数：

import useSWR from 'swr'

const fetcher = url => fetch(url).then(res => res.json())

function DataComponent() {
  const { data, error } = useSWR('/api/your-data', fetcher, {
    revalidateOnFocus: false, // 禁用标签页切换时的重新请求
    revalidateOnReconnect: false // 可选：禁用网络重连时的重新请求
  })

  // 组件渲染逻辑
}

2. 配置服务端渲染的缓存策略 #

如果使用getServerSideProps或App Router的服务端组件，通过设置响应头缓存数据，避免重复获取：

• 对于getServerSideProps：

export async function getServerSideProps(context) {
  const res = await fetch('https://your-api-endpoint', {
    headers: {
      'Cache-Control': 'public, s-maxage=60, stale-while-revalidate=300'
    }
  })
  const data = await res.json()

  // 给页面响应设置缓存头
  context.res.setHeader(
    'Cache-Control',
    'public, s-maxage=60, stale-while-revalidate=300'
  )

  return { props: { data } }
}

• 对于App Router（Next.js 13+），在路由组件中配置缓存规则：

// app/your-page/page.js
export const revalidate = 3600; // 每小时重新验证一次数据
// 或者设置为永久静态缓存
export const dynamic = 'force-static';

3. 检查Next.js严格模式（仅开发环境） #

开发环境下的严格模式会触发双重渲染，但生产环境默认关闭。如果开发中遇到该问题，可临时关闭：

// next.config.js
module.exports = {
  reactStrictMode: false,
}

4. 排除浏览器端因素 #

部分浏览器在资源不足时会冻结后台标签页，重新激活时可能重载。可提示用户检查浏览器的后台标签页节流设置，但这属于用户端配置，优先从应用层面优化。

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