使用Gatsby+@reach/router的React应用如何在浏览器后退时保留数据不重请求

• 后退重新请求的核心原因和@reach/router无关，是Gatsby客户端路由的默认行为：每次路由跳转时，离开的页面组件会被直接卸载，点击后退时页面组件重新挂载，绑定在组件挂载阶段的useEffect自然会重新执行触发请求。之前用react-router没有遇到该问题，大概率是之前的项目做了组件缓存配置，没有在路由跳转时卸载历史页面组件。
• 这个现象和Gatsby的SSR能力也没有直接关联：SSR仅负责生成页面首次访问的初始HTML，客户端激活后的路由跳转完全走客户端渲染逻辑，后退触发重渲染是客户端组件生命周期的正常表现，不属于SSR的问题。

方案1：新增全局请求缓存层（推荐） #

不需要修改现有路由跳转逻辑，只需要对接口请求做一层缓存封装，按请求参数（比如用户ID、列表分页参数）作为唯一key存储请求结果，组件useEffect中发起请求前先判断缓存中是否存在有效数据：

• 存在有效缓存：直接用缓存数据渲染页面，可根据业务需要选择是否在后台静默更新缓存，用户无感知
• 无有效缓存：正常发起请求，展示骨架屏/加载态，请求完成后写入缓存
  示例代码（以轻量状态管理库Zustand为例）：

// 缓存store定义
import { create } from 'zustand'

const useRequestCache = create((set, get) => ({
  cache: {},
  getCache: (key) => {
    const item = get().cache[key]
    // 缓存有效期设为5分钟，可自定义
    if (item && Date.now() - item.timestamp < 5 * 60 * 1000) return item.data
    return null
  },
  setCache: (key, data) => set(state => ({
    cache: {...state.cache, [key]: { data, timestamp: Date.now() }}
  }))
}))

// 页面组件中使用
const UserPage = ({ userId }) => {
  const [userData, setUserData] = useState(null)
  const [loading, setLoading] = useState(true)
  const getCache = useRequestCache(state => state.getCache)
  const setCache = useRequestCache(state => state.setCache)

  useEffect(() => {
    const cacheKey = `user_${userId}`
    const cachedData = getCache(cacheKey)
    if (cachedData) {
      setUserData(cachedData)
      setLoading(false)
      // 可选：后台静默更新数据
      fetchUser(userId).then(res => setCache(cacheKey, res))
      return
    }
    // 无缓存时正常请求
    setLoading(true)
    fetchUser(userId).then(res => {
      setUserData(res)
      setCache(cacheKey, res)
      setLoading(false)
    })
  }, [userId, getCache, setCache])

  return loading ? <Skeleton /> : <UserInfo data={userData} />
}

方案2：页面组件缓存（无需修改请求逻辑） #

通过Gatsby的wrapPageElementAPI结合React KeepAlive组件，给需要保留状态的页面做缓存，路由跳转时不销毁组件实例，后退时直接恢复原有状态，useEffect不会重复执行。

• 优势：现有业务逻辑完全不用改动，只需加一层缓存封装
• 注意：需要设置最大缓存数量，避免页面跳转过多导致内存占用过高

// gatsby-browser.js 中配置
import { KeepAlive } from 'react-activation'

export const wrapPageElement = ({ element, props }) => {
  // 只给用户页、关注者页这类需要缓存的页面加缓存
  if (props.uri.startsWith('/user/') || props.uri.startsWith('/follower/')) {
    return <KeepAlive name={props.uri}>{element}</KeepAlive>
  }
  return element
}

方案3：优化浏览器bfcache触发（可控性低，仅作补充） #

浏览器自带的往返缓存（bfcache）可以直接缓存完整的页面状态，但是如果页面中绑定了beforeunload、unload事件，或者有未关闭的IndexedDB、Websocket连接，会导致bfcache失效。可以检查项目中是否有这类逻辑，移除后部分场景下浏览器会自动缓存页面，后退时无需重渲染。

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