Next.js中Server Component的MQTT数据传递与重渲染问题

场景与问题 #

组件结构如下：

<ParentComponent> // 服务器组件
    <ChildComponent> // 客户端组件

将MQTT连接放在父组件（Server Component）中，因为客户端组件中初始化MQTT会报错，但Server Component无法使用useState等hooks，导致收到MQTT消息后无法触发子组件重渲染。

核心代码（Server Component）：

import * as mqtt from "mqtt";

const socket_client = mqtt.connect("mqtt://xxxxx:xxxx");

socket_client.on("connect", () => {
  socket_client.subscribe("nodered", function (err) {
    console.log("connected/subscribed");
  });
});

export default function Test() {
  let data = "";
  let reRender = 1;
  console.log("reRender:", reRender);

  socket_client.on("message", (topic, message) => {
    data = message.toString();
    console.log("in /nodered/Test, data: ", data);
    reRender++;
  });

  return (
    <section>
      <div className="flex flex-col" key={reRender}>
        <TestClient key={reRender} render={reRender} data={data} />
      </div>
    </section>
  );
}

当前现象：MQTT能正常接收Node-RED发布的消息，但更新reRender变量、设置key属性均无法触发TestClient重渲染，数据无法传递到子组件。

问题 #

1. 有没有办法强制TestClient组件重渲染？
2. 有没有其他获取MQTT数据的方案？客户端组件中尝试多次均无法正常工作。

更新：客户端组件包裹服务器组件的模式 #

发现可以用客户端组件包裹服务器组件的模式，但不知道如何将Server Component中的MQTT数据传递给Client Component：

客户端组件示例：

'use client'
 
import { useState } from 'react'
 
export default function ClientComponent({
  children,
}: {
  children: React.ReactNode
}) {
  const [count, setCount] = useState(0)
 
  return (
    <>
      <button onClick={() => setCount(count + 1)}>{count}</button>
      {children}
    </>
  )
}

页面组件（默认Server Component）：

import ClientComponent from './client-component'
import ServerComponent from './server-component'
 
export default function Page() {
  return (
    <ClientComponent>
      <ServerComponent />
    </ClientComponent>
  )
}

解决方案 #

方案1：在客户端组件中正确初始化MQTT连接 #

客户端组件中MQTT报错通常是因为在组件渲染阶段直接初始化连接，正确做法是在useEffect中初始化，确保在客户端环境运行，同时用useState管理数据状态：

'use client'
import { useState, useEffect } from 'react'
import * as mqtt from "mqtt";

export default function TestClient() {
  const [mqttData, setMqttData] = useState('')
  
  useEffect(() => {
    // 在客户端环境初始化MQTT连接
    const socketClient = mqtt.connect("mqtt://xxxxx:xxxx");
    
    socketClient.on("connect", () => {
      socketClient.subscribe("nodered", (err) => {
        if (!err) console.log("connected/subscribed");
      });
    });
    
    socketClient.on("message", (_, message) => {
      const payload = message.toString();
      setMqttData(payload);
      console.log("TestClient received data: ", payload);
    });
    
    // 组件卸载时断开连接，避免内存泄漏
    return () => {
      socketClient.end();
    };
  }, [])
  
  return (
    <section>
      <div className="flex flex-col">
        <p>{mqttData}</p>
      </div>
    </section>
  )
}

这种方式下，客户端组件自己管理MQTT连接和数据状态，收到消息时调用setMqttData会自动触发组件重渲染，无需依赖Server Component。

方案2：用React Context实现跨组件数据传递（适配客户端包裹服务器的模式） #

如果必须保留Server Component中的MQTT逻辑，可以通过React Context让Server Component调用客户端组件的状态更新函数：

1. 创建MQTT状态管理的Context（客户端组件）：

'use client'
import { createContext, useState, useContext } from 'react'

const MQTTContext = createContext({
  mqttData: '',
  setMqttData: () => {}
})

export function MQTTProvider({ children }) {
  const [mqttData, setMqttData] = useState('')
  
  return (
    <MQTTContext.Provider value={{ mqttData, setMqttData }}>
      {children}
    </MQTTContext.Provider>
  )
}

export function useMQTT() {
  return useContext(MQTTContext)
}

2. 在页面中用MQTTProvider包裹Server Component：

// 页面组件（默认Server Component）
import { MQTTProvider } from './MQTTContext'
import Test from './Test'

export default function Page() {
  return (
    <MQTTProvider>
      <Test />
    </MQTTProvider>
  )
}

3. 调整MQTT逻辑到客户端组件：

注意：Server Component不能直接调用客户端hooks，因此建议将MQTT连接和消息监听逻辑封装到客户端组件中，通过Context传递状态。若坚持在Server Component中处理连接，可通过props传递setMqttData，但Server Component仅在服务器端渲染一次，无法实时响应MQTT消息，因此更推荐方案1。

关键说明 #

• Server Component仅在服务器端渲染一次（除非配置了重新验证），本身无法触发客户端组件的重渲染，必须依赖客户端组件的状态管理能力。
• 客户端组件中初始化MQTT时，务必在useEffect中执行，避免在组件顶层直接运行导致的环境错误。

内容的提问来源于stack exchange，提问作者m-alptekin