基于Next.js与Express.js的SPA如何实现无刷新跨设备数据实时更新？

核心思路是通过服务端主动推送技术替代传统的客户端定时轮询，主流适配Next.js+Express技术栈的方案如下：

方案1：WebSocket 全双工通信（生产环境首选） #

自带双向通信能力，适配大多数业务场景，推荐用封装成熟的socket.io库，内置断线重连、房间分组、消息确认等能力，开发成本更低。

后端（Express.js 侧配置） #

• 安装socket.io依赖，在原有Express服务基础上集成WebSocket服务
• 监听数据修改事件，收到修改请求后将新数据广播给其他所有已连接的客户端
  参考代码：

const express = require('express');
const http = require('http');
const { Server } = require('socket.io');
const app = express();
const server = http.createServer(app);
// 配置跨域允许Next.js前端访问
const io = new Server(server, {
  cors: { origin: "你的Next.js应用部署地址", credentials: true }
});

// 监听客户端连接
io.on('connection', (socket) => {
  // 监听数据修改事件，广播给除触发者外的所有在线客户端
  socket.on('data_updated', (updatedData) => {
    socket.broadcast.emit('data_sync', updatedData);
    // 如果是指定用户/业务分组可见的数据，可用io.to('房间id').emit('data_sync', updatedData)定向推送
  });
  socket.on('disconnect', () => {
    console.log('用户断开连接', socket.id);
  });
});

server.listen(3001, () => console.log('服务运行在3001端口'));

前端（Next.js 侧配置） #

• 安装socket.io-client依赖，在对应业务页面/全局布局初始化Socket连接
• 监听服务端推送的data_sync事件，收到新数据后直接更新本地状态（useState、Zustand、Redux等都适用），视图会自动刷新无需重载页面
  参考代码：

import { useEffect, useState } from 'react';
import { io } from 'socket.io-client';

export default function DataPage() {
  const [dataList, setDataList] = useState([]);
  useEffect(() => {
    // 初始化Socket连接
    const socket = io('你的Express服务地址');
    // 监听数据同步事件，更新本地状态
    socket.on('data_sync', (newData) => {
      setDataList(prev => prev.map(item => item.id === newData.id ? newData : item));
    });
    // 组件销毁时断开连接释放资源
    return () => socket.disconnect();
  }, []);

  // 数据修改触发函数
  const handleModifyData = async (newData) => {
    // 先调用原有数据修改接口
    await fetch('/api/updateData', {
      method: 'POST',
      body: JSON.stringify(newData)
    });
    // 发送修改事件给服务端触发广播
    socket.emit('data_updated', newData);
  }

  return <div>{/* 页面业务渲染逻辑 */}</div>
}

方案2：Server-Sent Events（SSE，单向推送场景适用） #

如果仅需要服务端给前端推送数据，不需要前端实时发消息给服务端，可以用更轻量的原生SSE方案，无需引入额外依赖：

• 后端Express新增SSE接口，设置响应头Content-Type: text/event-stream保持长连接，数据修改时往流中写入更新事件
• 前端用原生EventSource接口监听SSE推送事件，收到数据后更新本地状态即可

注意SSE是单向通信协议，同一域名下最多仅支持6个并发连接，仅适合小规模业务场景使用

落地注意事项 #

• 如果Express是多实例部署，需要搭配Redis Pub/Sub做跨实例的消息同步，否则不同实例连接的客户端收不到同步消息
• 推送数据前要做权限校验，避免把用户无权限查看的敏感数据推送出去
• 自己实现原生WebSocket时要额外补充断线重连、断网期间数据补发逻辑，避免数据更新丢失

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