聊天应用频繁刷新组件选型：服务端还是客户端组件更优？

现有客户端轮询方案的问题 #

你当前的客户端实现存在几个明显的可优化点：

• 定时器重复创建：useEffect依赖了messagesList，每次消息列表更新都会销毁旧定时器并创建新的，可能导致短时间内多请求并发，甚至定时器泄漏
• 全量拉取浪费带宽：每次请求都拉取全部消息，没有只获取新增内容
• 轮询间隔过于频繁：500ms一次请求会给服务端带来不必要的压力，且多数请求可能没有新数据

修正后的客户端轮询示例（用SWR优化）：

"use client";

import { useState } from "react";
import useSWR from "swr";
import message from "./messageType";

// 增量拉取：只请求上次最后一条消息之后的新内容
const fetcher = async (lastMessageId?: string) => {
  const res = await fetch(`/api/messages?after=${lastMessageId || ""}`);
  return res.json();
};

export default function MessagesWindow() {
  const [messagesList, setMessagesList] = useState<message[]>([]);

  // 用SWR做定时刷新，默认每2秒一次（可根据用户活跃状态动态调整）
  const { data: newMessages } = useSWR(
    [messagesList.at(-1)?._id],
    fetcher,
    { refreshInterval: 2000 }
  );

  // 合并新增消息到现有列表
  useState(() => {
    if (newMessages?.length) {
      setMessagesList(prev => [...prev, ...newMessages]);
    }
  }, [newMessages]);

  return (
    <ul>
      {messagesList.map((element: message) => (
        <li key={element._id}>{element.messageContent}</li>
      ))}
    </ul>
  );
}

关于服务端组件的误解澄清 #

你担心服务端组件会导致每次重渲染都下载整页内容是错误的：

• React 18+的服务端组件采用流式渲染，只会将组件渲染的增量变化发送给客户端，而非整页HTML
• 服务端组件的代码不会被打包到客户端JS中，能显著减少客户端需要加载的代码量
• 服务端组件适合做初始数据预取（比如页面加载时直接渲染最新消息列表），然后结合客户端轻量逻辑（比如SWR/SSE）做实时更新，无需单独编写API路由处理器（可直接在服务端组件中调用数据库或内部服务）

服务端组件结合客户端实时更新的示例：

// 服务端组件（无"use client"指令）
import message from "./messageType";

// 直接在服务端获取初始消息列表，无需API路由
async function getInitialMessages() {
  const res = await db.messages.findMany({ orderBy: { createdAt: "asc" } });
  return res;
}

export default async function MessagesWindow() {
  const initialMessages = await getInitialMessages();

  // 服务端渲染初始内容，客户端组件负责实时更新
  return (
    <>
      <ul>
        {initialMessages.map((element: message) => (
          <li key={element._id}>{element.messageContent}</li>
        ))}
      </ul>
      <MessageUpdater lastMessageId={initialMessages.at(-1)?._id} />
    </>
  );
}

// 客户端组件（负责实时更新）
"use client";

import { useState, useEffect } from "react";
import message from "./messageType";

export function MessageUpdater({ lastMessageId }: { lastMessageId?: string }) {
  const [newMessages, setNewMessages] = useState<message[]>([]);

  useEffect(() => {
    // 用SSE替代轮询，服务端主动推送新消息
    const eventSource = new EventSource(`/api/messages/sse?after=${lastMessageId || ""}`);
    
    eventSource.onmessage = (event) => {
      const msg = JSON.parse(event.data);
      setNewMessages(prev => [...prev, msg]);
    };

    return () => eventSource.close();
  }, [lastMessageId]);

  return (
    <>
      {newMessages.map((element: message) => (
        <li key={element._id}>{element.messageContent}</li>
      ))}
    </>
  );
}

方案对比与选择 #

总结 #

1. 若想快速优化现有方案，优先用SWR/React Query替代手动定时器，同时改成增量拉取，并设置合理的轮询间隔
2. 若追求更好的性能和更少的客户端代码，推荐用服务端组件做初始渲染，结合SSE/WebSocket做实时推送，既避免了整页下载的问题，又减少了客户端JS开销
3. 务必放弃原有的粗糙定时器方案，不仅性能差，还容易引发各类bug

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