Next.js中如何实现SSR与CSR组件的数据交互及联动？

方案一：React Context API（推荐适配SSR场景） #

• 在SSR父组件MapPage中创建Context，定义hoveredBusinessId状态和setHoveredBusinessId更新方法。
• SSR子组件BusinessCards直接使用Context提供的更新方法，在卡片onMouseEnter事件中传入当前商家ID，更新全局状态。
• CSR子组件MapComponent（标记use client）订阅Context状态，当hoveredBusinessId变化时，调用地图API的对应方法，触发目标标记的悬停样式或状态。
• 适配说明：父组件SSR不影响Context在客户端的状态接管，初始SSR渲染时Context状态为null，客户端交互后会正常更新。

方案二：状态提升+父子回调 #

• 在MapPage中维护hoveredBusinessId状态，初始值为null。
• 给BusinessCards传递onCardHover回调函数，卡片悬停时调用该回调更新父组件的hoveredBusinessId。
• 将hoveredBusinessId作为props传递给MapComponent，在CSR组件内通过useEffect监听props变化，一旦ID更新，立即定位对应地图标记并触发悬停逻辑。
• 优势：轻量化，仅作用于当前组件树，避免Context的全局扩散，适合仅两个子组件联动的场景。

方案三：Ref直接调用方法 #

• 在MapPage中创建useRef()生成mapMarkerControls。
• MapComponent挂载完成后，将控制标记悬停的方法（如setMarkerHover(id)）挂载到mapMarkerControls.current上。
• BusinessCards接收mapMarkerControls，在卡片悬停事件中直接调用mapMarkerControls.current?.setMarkerHover(businessId)，触发地图标记的悬停状态。
• 注意：需判断mapMarkerControls.current是否存在，避免客户端初始化前的空引用错误。

关键注意点 #

• 所有涉及地图DOM/API的操作必须放在CSR组件的useEffect或客户端生命周期钩子中，禁止在SSR阶段执行。
• 用React.memo包裹BusinessCards，避免因父组件状态更新导致的不必要重渲染。

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