Next.js 与 WebSocket

Next.js App Router 以 RSC 为主；WebSocket 是 有状态长连接，几乎总在 Client Component 或独立脚本里完成。CodeRoadMap platform 不在 Route Handler 里托管 WS。

学习目标

• 理解为何 WS 不适合 Server Component
• 在 "use client" 组件里连 Spring Boot
• 知道生产环境 WS 常直连 backend 或经 Nginx

为何不用 RSC / Route Handler

层	能否托管 WS	原因
Server Component	❌	渲染完即结束，无持久连接
Route Handler	⚠️ 受限	Node 可升级，但与 Java 后端重复；本站不采用
Client Component	✅	浏览器直连 wss://
Spring Boot	✅	实验台 WS 权威端点

本站架构：Next 渲染页面 + 浏览器 WS 连 Java（ws-stomp）。

客户端封装

// platform/src/components/lab/LabChat.tsx
"use client";

import { useLabSocket } from "@/hooks/useLabSocket";

export function LabChat({ sessionId }: { sessionId: string }) {
  const { messages, send } = useLabSocket(sessionId);
  // UI ...
}

父级 Server Component 用 REST 取 sessionId 与历史：

// page.tsx — Server Component
const session = await fetch(`${API_BASE}/api/lab/sessions/${id}`).then(r => r.json());
return <LabChat sessionId={session.id} initialMessages={session.messages} />;

环境变量

# .env.local — 浏览器可见前缀
NEXT_PUBLIC_WS_URL=wss://coderoadmap.local/ws

开发时经 Nginx 统一入口（ngx-proxy），避免 CORS 与混合端口。

HMR 与 WS 并存

本地 npm run dev 时 Next HMR 也走 WebSocket Upgrade；Nginx 需对 / 与 /ws 分别反代，勿把 WS 流量误打到 Next dev server。

练习

• 把 LabChat 做成 client boundary，确认 RSC 只传 props
• 读 next-rsc 对比「服务端 fetch REST vs 客户端 WS」