I'm trying to make a real-time frontend dashboard for my game telemetry.
I have a route at api/server/[id]/connect that game servers call when they start running.
Inside the route.ts, it just adds a new server to a class with a list of servers.

What I have right now is a page with two cards that fetch the current server and player count.

export default function Home() {
    return (
        <main>
            <div className={"p-4 mx-auto max-w-7xl"}>
                <div className={"grid grid-cols-1 sm:grid-cols-2 gap-4"}>
                    <OverviewCard title={"Servers"} value={serverStoreManager.getServerCount()} />
                    <OverviewCard  title={"Players"} value={serverStoreManager.getPlayerCount()} />
                </div>
            </div>
        </main>
    );
}

What I want is, whenever a new server calls the connect endpoint, the servers value in the frontend is replaced with the new server count.

The way I used to do this was having a backend server using express that had the same endpoints, and a WebSocket, and the frontend would just connect to the WebSocket and receive the updates.

Having two different projects, and having to have providers, and everything being client components, having to fetch initial values, etc... just felt really clunky, and I'm hoping there is a better way to do this.