Real-Time Content Updates (SSE)
Stream live content changes directly to client browsers using Server-Sent Events (SSE). Active browser tabs invalidate their local memory caches and re-render without requiring a full page reload.
“The SDK connects via browser EventSource, invalidating memory cache tags the instant an editor hits publish.”
Server-Sent Events Architecture
Unlike bidirectional WebSockets which require complex connection state, Server-Sent Events (SSE) provide a lightweight, HTTP/2-friendly stream for push-based cache invalidation:
EventSource Stream
Opens a persistent HTTP connection to the NestJS Control Plane using the browser's native EventSource API.
Selective Invalidation
Extracts slug and collectionId tags from events and evicts only the matching records from memoryCache.
20s Heartbeat Ping
Transmits periodic comment frames to keep connection sockets active through Cloudflare idle timeouts.
Exponential Backoff
Automatically attempts reconnection with exponential backoff (capped at 30s) if connectivity drops.
Subscribing via the SDK
Call nexus.content.subscribeToUpdates() inside a React useEffect to listen for real-time updates:
| 1 | "use client"; |
| 2 | import { nexus } from "@nexushub/client"; |
| 3 | import { useEffect, useState } from "react"; |
| 4 | |
| 5 | export function LiveBreakingNewsBanner() { |
| 6 | const [headline, setHeadline] = useState(""); |
| 7 | |
| 8 | const fetchLatest = async () => { |
| 9 | const page = await nexus.getPage("banner", { forceRefresh: true }); |
| 10 | setHeadline(page.headline); |
| 11 | }; |
| 12 | |
| 13 | useEffect(() => { |
| 14 | fetchLatest(); |
| 15 | |
| 16 | // Subscribe to real-time SSE stream |
| 17 | const unsubscribe = nexus.content.subscribeToUpdates((event) => { |
| 18 | console.log("⚡ Live content update received:", event); |
| 19 | if (event.type === "content.updated" && event.slug === "banner") { |
| 20 | fetchLatest(); |
| 21 | } |
| 22 | }); |
| 23 | |
| 24 | return () => unsubscribe(); |
| 25 | }, []); |
| 26 | |
| 27 | return <div className="bg-cyan-500 text-white p-3 font-bold">{headline}</div>; |
| 28 | } |
20-Second Heartbeat Protocol
Cloudflare and most reverse proxies silently terminate idle HTTP connections after 30–60 seconds of inactivity. The GN-Apex Control Plane injects a lightweight heartbeat every 20 seconds:
| 1 | event: ping |
| 2 | data: {"t": 1712932222123} |
| 3 | |
| 4 | event: message |
| 5 | data: {"type": "content.updated", "slug": "home"} |
Understanding In-Process Scope
subscribeToUpdates() only invalidates the in-memory cache of the active browser tab running the code. To update server-rendered Next.js pages for other visitors, the backend simultaneously executes the Direct R2 Purge and Cloudflare CDN Flush.