Distributed UI consistency

Summary

Multiple tabs, devices, edge caches show same logical state — broadcast channel, storage event, WebSocket sync, SWR revalidation. Stale tab after logout is security issue. Real-time + cache TTL tension — version stamps on entities.

Code example

const channel = new BroadcastChannel('app-state');

channel.postMessage({ type: 'LOGOUT' });

channel.onmessage = (event) => {
  if (event.data.type === 'LOGOUT') clearSession();
};

window.addEventListener('storage', (e) => {
  if (e.key === 'token' && e.newValue === null) clearSession();
});

Key points

• Multiple tabs, devices, edge caches show same logical state — broadcast channel, storage event, WebSocket sync, SWR revalidation.
• Stale tab after logout is security issue.
• Real-time + cache TTL tension — version stamps on entities.

Further reading

• BroadcastChannel
• storage event

Related concepts

• Conflict resolution models
• Frontend system design trade-offs