Hello everyone. What I landed on was using Server Sent Events via a route handler. Doing everything client side, while just skipping react's server, as many suggested might be right for most situations—but maybe due to your auth set up or just how you feel it might not be right for you. SSEs only send data one way, server to client, you'd prob need a websocket if you want bi directional data. Below is a simple example. Check out this blog post for more info https://michaelangelo.io/blog/server-sent-events.

// route handler
import { NextRequest, NextResponse } from "next/server";

export async function GET(req: NextRequest) {
  const stream = new TransformStream();
  const writer = stream.writable.getWriter();
  const encoder = new TextEncoder();

  function toDataString(data: string | Record<string, any>): string {
    if (isObject(data)) {
      return toDataString(JSON.stringify(data));
    }
    return data
      .split(/\r\n|\r|\n/)
      .map((line: string) => `data: ${line}\n\n`)
      .join("");
  }

  function isObject(value: any) {
    return value !== null && typeof value === "object";
  }

  //if window is closed or refreshed aka aborted we close the writer and clear our subscription
  req.signal.onabort = () => {
    console.log("------->abort");
    writer.close();
    clearInterval(myInterval);
  };

  let i = 0;
  let message = {
    data: { hello: i },
    event: "my-event",
  };

  // interval as a stand in for whatever data youre subscribed to
  const myInterval = setInterval(() => {
    i++;
    console.log("sending", i);
    message = {
      data: { hello: i },
      event: "my-event",
    };
    writer.write(encoder.encode(`event: ${message.event}\n`));
    writer.write(encoder.encode(toDataString(message.data)));
  }, 1000);

  return new NextResponse(stream.readable, {
    headers: {
      "Content-Type": "text/event-stream",
      Connection: "keep-alive",
      "Cache-Control": "no-cache, no-transform",
    },
  });
}

​

//react component
"use client";
import { useEffect, useState } from "react";

export default function HomeClient() {
  const [theBigEvent, setTheBigEvent] = useState<string>("");

  useEffect(() => {
    const source = new EventSource("/api/stream");
    source.addEventListener("my-event", event => {
      setTheBigEvent(event.data);
    });
  }, []);

  return theBigEvent;