实时同步用户数据：Next.js 应用中实现跨客户端状态更新的实用方案-js教程-PHP中文网

本文介绍在 next.js 应用中（如 discord 克隆项目）如何解决“一个客户端修改数据后，其他客户端无法即时感知”的问题，涵盖轮询刷新（swr）、服务端预加载优化及 websocket 的适用边界。

本文介绍在 next.js 应用中（如 discord 克隆项目）如何解决“一个客户端修改数据后，其他客户端无法即时感知”的问题，涵盖轮询刷新（swr）、服务端预加载优化及 websocket 的适用边界。

在构建实时协作型应用（例如 Discord 克隆）时，一个常见痛点是：当用户 A 删除服务器后，用户 B 的界面仍显示该服务器，直到手动刷新页面——这显然违背了现代 Web 应用的实时体验预期。根本原因在于，客户端默认不具备“被动接收变更通知”的能力；传统 HTTP 请求是主动拉取（pull），而非服务端主动推送（push）。

✅ 推荐方案：客户端轮询 + 智能缓存（SWR）

对于大多数中低频实时场景（如服务器列表、频道状态、成员在线状态等），无需立即毫秒级同步，采用 @vercel/swr 的定时刷新策略是简洁、可靠且易于落地的首选方案。它避免了自建 WebSocket 服务的复杂性，同时比全量页面重载更轻量。

以下是一个典型的服务端列表组件示例：

"use client";

import useSWR from "swr";

// 假设 fetcherFn 是封装好的 API 调用函数
async function fetcherFn(url: string) {
  const res = await fetch(url);
  if (!res.ok) throw new Error("Failed to fetch servers");
  return res.json();
}

export default function Servers({ initialData }: { initialData: Server[] }) {
  const { data = initialData, isLoading, error } = useSWR<server>(
    "/api/servers",
    fetcherFn,
    {
      refreshInterval: 30_000, // 每 30 秒自动刷新一次
      fallbackData: initialData, // 优先渲染服务端预获取的数据，消除首屏空白
      revalidateOnFocus: false, // 离开标签页时不重请求（可选）
      dedupingInterval: 2000,   // 防抖重复请求（可选）
    }
  );

  if (isLoading) return <div classname="p-4">Loading servers...</div>;
  if (error) return <div classname="p-4 text-red-500">Error loading</div>;

  return (
    <ul classname="space-y-2">
      {data.map((server) => (
        <li key="{server.id}" classname="flex items-center gap-2 p-2 bg-gray-100 rounded">
          <span classname="font-medium">{server.name}</span>
          <button onclick="{()"> handleDelete(server.id)}
            className="text-xs text-red-600 hover:text-red-900"
          >
            Delete
          </button>
        </li>
      ))}
    </ul>
  );
}</server>

? 关键优化点：通过服务端组件（page.tsx）预先获取 initialData 并传入客户端组件，再交由 SWR 管理后续更新，既保障首屏速度与 SEO 友好性，又实现客户端状态的渐进式保鲜。

⚠️ 注意事项与权衡

非真正实时：refreshInterval 决定了最终一致性延迟（如设为 30s，则最大延迟为 30s）。若业务要求“删除即刻消失”（如敏感操作审计、权限即时回收），则需升级至 WebSocket 或 Server-Sent Events（SSE）。

JS X Monitor
X.com (Twitter) 账号监控自动化：定时抓取指定账号最新推文，发现新内容即时推送通知。

下载
网络与性能开销：高频轮询会增加请求量。建议结合 revalidateIfStale: true 和 dedupingInterval 减少冗余请求，并对非核心列表（如历史消息）延长间隔或禁用自动刷新。

突变（Mutate）优于等待刷新：当用户本地触发变更（如点击删除），应立即调用 mutate() 手动更新缓存，实现视觉上的“瞬时响应”，再异步提交 API：

async function handleDelete(id: string) {
  // 1. 乐观更新：立即从 UI 和缓存中移除
  mutate(
    "/api/servers",
    (prev: Server[]) => prev.filter(s => s.id !== id),
    { rollbackOnError: true }
  );

  // 2. 异步提交删除请求
  try {
    await fetch(`/api/servers/${id}`, { method: "DELETE" });
  } catch (err) {
    // 失败时自动回滚（因设置了 rollbackOnError）
    console.error("Delete failed", err);
  }
}

? 替代方案对比

方案	实时性	复杂度	适用场景
SWR / React Query 轮询	秒级延迟	★☆☆☆☆（极低）	列表状态、非关键元数据同步
WebSocket（如 Pusher、Supabase Realtime）	毫秒级	★★★★☆（需鉴权、连接管理）	聊天消息、在线状态、协同编辑
Server-Sent Events (SSE)	秒级内	★★☆☆☆（服务端需支持流）	单向广播类通知（如系统公告）