Push changes, skip the F5

When server data changes, tell open clients; never wait for F5.

Guillermo Rauch7 Principles of Rich Web Applications
When data changes on the server, let the clients know without asking. This is a form of performance improvement that frees the user from manual refresh actions (F5, pull to refresh). New challenges: (re)connection management, state reconciliation.
rauchg.com · 2014Read article ↗
Guillermo Rauch@rauchg
The realtime nextjs.org/conf registration is powered by @replicache Notably, this year we're using their upcoming edge & serverless WebSocket solution. It adds instant streaming sync to Replicache's existing features 🚀
Sep 2, 2022View on X ↗

Demo 1 is the push; demo 2 is his two “new challenges”: reconnection and reconciliation.

1 · Deploys change as you look

Push a commit, then scroll the right list and push again.

Fetched on loadBad
Stale 0sWrong badges 0Missing 0
Pushed by the serverGood
Stale 0sUpdates applied 0
const source = new EventSource("/api/deployments/events");

source.addEventListener("deployment", (e) => {
  const d = JSON.parse(e.data);
  const isNew = !store.has(d.id);
  store.upsert(d); // keyed by id: a badge changes in place
  // Never move rows under the reader: collect them behind a pill.
  if (isNew && list.scrollTop > 0) newPill.add(d.id);
});

2 · Drop the connection

Go offline for a few events, then come back online.

Resume, no replayBad
Missed 0Wrong rows 0
Reconnect, replayGood
Replayed 0Wrong rows 0
// EventSource retries on its own and sends Last-Event-ID.
source.onerror = () => status.set("Reconnecting…");
source.onopen = () => status.set("Live");

// Server: replay everything after the last id this tab saw.
const since = Number(req.headers.get("last-event-id") ?? 0);
for (const event of log.after(since)) stream.send(event);

Why it matters, pros and cons

Why it matters

A dashboard that’s right only after F5 isn’t slow, it’s wrong. Push makes it true.

Pros

  • No Refresh button, no pull-to-refresh, no stale badges.
  • Keyed upserts change a badge in place; nothing reflows.
  • Event ids let a tab replay what it missed while offline.

Cons

  • Reconnect, backoff and replay are real work to get right.
  • Every open tab holds a connection the server pays for.
  • Data that rarely changes: revalidate on focus is enough.