MERN应用中实现实时数据拉取的最优方案是什么？

一、修复现有轮询方案的痛点 #

1. 解决全屏加载打断操作的问题 #

核心是*分离首次加载和后台静默更新的状态：

• 给你的getOrders action 加一个silent参数，后台轮询调用时传入该参数，reducer中判断如果携带silent为true时不修改全局loading状态，仅在首次加载时触发全屏Loader
• 新增局部更新提示：非首次拉取数据时，仅在页面角落展示小型更新提示（比如顶部状态栏的加载小图标），不阻塞用户操作

对应代码修改示例：
首先调整action逻辑：

// 给getOrders加参数控制是否静默更新
const getOrders = (params = {}) => async (dispatch) => {
  if (!params.silent) {
    dispatch({ type: 'GET_ORDERS_REQUEST' }) // 只有非静默才触发全局loading
  }
  try {
    const res = await api.get('/orders')
    dispatch({ type: 'GET_ORDERS_SUCCESS', payload: res.data })
  } catch (e) {
    dispatch({ type: 'GET_ORDERS_FAIL', payload: e.message })
  }
}

调整组件逻辑：

// 新增state控制首次加载
const [isFirstLoad, setIsFirstLoad] = useState(true)

useEffect(() => {
  const fetchOrders = async (silent = false) => {
    await dispatch(getOrders({ silent }))
    if (isFirstLoad) setIsFirstLoad(false)
  }
  // 首次加载
  fetchOrders()

  // 用setTimeout替代setInterval，避免请求堆叠
  let timer
  const startPolling = async () => {
    timer = setTimeout(async () => {
      await fetchOrders(true) // 静默更新传silent=true，不触发全局loading
      startPolling()
    }, 60000)
  }
  startPolling()

  // 监听页面可见性，隐藏时停轮询，显示时立刻拉取一次再继续轮询
  const handleVisibilityChange = () => {
    if (document.hidden) {
      clearTimeout(timer)
    } else {
      fetchOrders(true)
      startPolling()
    }
  }
  document.addEventListener('visibilitychange', handleVisibilityChange)

  return () => {
    clearTimeout(timer)
    document.removeEventListener('visibilitychange', handleVisibilityChange)
  }
}, [dispatch, isFirstLoad])

// 渲染逻辑仅首次加载展示全屏Loader
return isFirstLoad && loading ? (
  <Loader />
) : error ? (
  <Message variant="danger">{error}</Message>
) : (
  <Container fluid>
    {/* 非首次加载时展示小型更新提示，不打断操作 */}
    {loading && !isFirstLoad && <small className="text-muted">数据更新中...</small>}
    ...
  </Container>
)

2. 降低现有轮询的性能开销 #

• 把setInterval替换为链式setTimeout：等待上一次请求完成后再开启下一次计时，避免接口响应慢时请求堆叠的问题
• 新增页面可见性监听：页面切到后台隐藏时停止轮询，切回前台时立刻拉取一次数据再恢复轮询，减少不必要的请求
• 新增错误熔断机制：接口连续报错时逐步拉长轮询间隔，避免无效请求频繁发送

二、更优的实时数据拉取方案 #

如果后端可以配合改造，优先选择推送方案，性能远优于轮询：

• SSE（服务器推送事件）：基于HTTP协议的单向推送能力，客户端只需要建立一次长连接，后端有数据更新才会主动推给前端，资源开销极低，非常适合订单这种仅需要服务端单向推送数据的场景
• WebSocket：支持双向通信，适合需要前后端交互的实时场景

SSE简单实现示例：

useEffect(() => {
  // 建立长连接
  const eventSource = new EventSource('/api/orders/stream')
  // 接收服务端推送的订单数据
  eventSource.onmessage = (event) => {
    const orders = JSON.parse(event.data)
    dispatch({ type: 'GET_ORDERS_SUCCESS', payload: orders })
  }
  eventSource.onerror = () => {
    eventSource.close()
  }
  return () => eventSource.close()
}, [dispatch])

该方案不需要客户端定时发送请求，没有多余请求开销，数据更新时静默更新状态，不会触发全屏加载，完全解决你提到的两个痛点。

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