I have a WebSocket-like setup between my Next.js app and a Go server — though technically I’m using Server-Sent Events (SSE).

Reason: I’m processing AI-related tasks that take too long for a standard HTTP request/response flow.

What happens
1. The Next.js client sends a URL to my Go server.
2. The Go server starts processing and returns a 202 Accepted.

When the Go server finishes, it calls a webhook endpoint in my Next.js app (/api/webhook/sse).
(I know the pathname might not be ideal — please ignore that part.)

Goal
When the Go server sends data to Next.js, I want to display toast notifications as status updates for the user.

Problem
As my understanding I can trigger toast with sonner from a server file.

My setup in the Next app
In page.tsx (the default page), I’ve added:

<WebhookProvider />

Here’s my WebhookProvider:

export function WebhookProvider() {
  const [toastToSend, setToastToSend] = useState<string | null>(null);
  const esRef = useRef<EventSource | null>(null);

  useEffect(() => {
    console.log("WebhookProvider mounted on the client ✅");

    const es = new EventSource(`${window.location.origin}/api/webhook/sse`);
    esRef.current = es;

    es.onmessage = (event: MessageEvent) => {
      console.log("🎊 SSE: message received!", event.data);
      setToastToSend(event.data);
    };

    es.onerror = (err) => {
      console.error("SSE: ERROR!", err);
      es.close();
      setTimeout(() => {
        console.log("🎉 SSE: Trying to reconnect...");
        esRef.current = new EventSource(`${window.location.origin}/api/webhook/sse`);
      }, 1000);
      setToastToSend(null);
    };

    return () => {
      console.log("SSE: Closing connection");
      es.close();
    };
  }, []);

  useEffect(() => {
    if (!toastToSend) return;
    try {
      const payload: WebhookPayload = JSON.parse(toastToSend);
      const toastId = `webhook-${payload.timestamp || Date.now()}`;
      switch (payload.status) {
        case "started":
          toast.loading(`Starting ${payload.type}...`, { id: toastId });
          break;
        case "running":
          toast.loading(`Processing ${payload.type}...`, { id: toastId });
          break;
        case "success":
          toast.success(`Done! ${payload.type}`, { id: toastId });
          break;
        case "error":
          toast.error(payload.error || "Something went wrong", { id: toastId });
          break;
        default:
          toast.info(`${payload.status}: ${payload.event}`);
      }
    } catch (err) {
      console.error("SSE parse error:", err);
    }
  }, [toastToSend]);

  return null;
}

I’ve also tried a version without state, just handling everything directly in onmessage, but the issue remains.

Here’s my endpoint:

export async function GET(request: NextRequest) {
  console.log("[SSE] GET /api/webhook/sse – connection started");
  return createSseResponse();
}

This runs fine — I see all the console logs when the connection is established.
The problem: when my Go server sends the payload, the Next.js server receives and validates it (confirmed by console logs), but then nothing happens — the client never receives the event.

I’ve been debugging this for about six hours now and can’t figure out why it stops at that point.

Please ask for extra info if you think you can help. Message gets to long if I share everything in detail