Wie Supabase Realtime funktioniert

Supabase Realtime ist eine WebSocket-basierte Schicht über PostgreSQL, die Änderungen in deiner Datenbank in Echtzeit broadcastet. Wenn eine Zeile in einer Tabelle eingefügt, aktualisiert oder gelöscht wird, empfangen alle abonnierten Clients sofort ein Event — ohne Polling.

Die technische Grundlage: Supabase nutzt PostgreSQLs built-in Logical Replication. Änderungen werden über einen Replication Slot erfasst und an den Realtime-Service weitergegeben, der WebSocket-Events an abonnierte Clients sendet.

Für das WeWeb-Frontend bedeutet das: kein interval-basiertes Polling (`setInterval` alle 5 Sekunden die Daten neu laden). Stattdessen: einmalige WebSocket-Verbindung, und die UI aktualisiert sich sofort wenn Daten in der Datenbank geändert werden. Für ein Produktions-SaaS mit vielen gleichzeitigen Nutzern ist das deutlich effizienter als Polling — weniger Datenbankbelastung, niedrigere Infrastrukturkosten und bessere UX.

Realtime in WeWeb konfigurieren

In WeWebs Supabase-Plugin: aktiviere Realtime für eine Collection. Das erstellt automatisch einen WebSocket-Kanal für diese Tabelle. Wenn sich Daten in Supabase ändern, aktualisiert sich die Collection in WeWeb sofort — und alle an diese Collection gebundenen UI-Elemente aktualisieren sich mit.

Konfiguriere, welche Events du empfangen möchtest: - **INSERT**: neue Einträge in der Tabelle - **UPDATE**: geänderte Einträge - **DELETE**: gelöschte Einträge - **ALL**: alle Events

Für ein Dashboard, das neue Bestellungen oder Alerts zeigt: aktiviere INSERT und UPDATE. DELETE brauchst du meist nicht. Weniger Events = weniger WebSocket-Traffic = niedrigere Kosten.

Row-Level-Security funktioniert auch mit Realtime: Nutzer empfangen nur Realtime-Events für Zeilen, auf die ihre RLS-Policy Zugriff gibt. Das ist entscheidend für Multi-Tenant-Apps, bei denen Nutzer nur ihre eigenen Daten sehen dürfen.

Dashboard-Layout für Echtzeit-Daten

Das optimale Dashboard-Layout für Echtzeit-Daten:

**KPI-Karten (oben)**: 3–6 Metriken als große Zahlen. Jede Karte ist an eine Supabase-Abfrage gebunden, die aggregierte Daten zurückgibt (COUNT, SUM, AVG). Mit Realtime aktualisieren sich die Zahlen sofort wenn neue Daten eingehen.

**Aktivitätsfeed (rechts)**: Eine Liste der letzten N Ereignisse, sortiert nach created_at DESC. Mit Realtime werden neue Einträge oben eingefügt ohne Seiten-Reload.

**Tabellen/Diagramme (mitte)**: Zeitreihen-Diagramme für Trends, Tabellen für detaillierte Datensätze. Realtime-Updates für Diagramme sind performance-intensiver — aktualisiere nicht die vollständige Diagrammdaten bei jedem Event, sondern nur den neuesten Datenpunkt.

Für deutsche B2B-SaaS: denke an Zugriffskontrolle auf Dashboard-Ebene. Verschiedene Nutzerrollen sollen verschiedene KPIs sehen — implementiere das mit WeWebs Conditional Visibility basierend auf dem Nutzer-Rollen-Attribut aus Supabase Auth.

Performance-Optimierung für skalierte Dashboards

Echtzeit-Dashboards können die Performance degradieren, wenn nicht richtig implementiert:

**Event-Throttling**: Wenn Events sehr häufig kommen (jede Sekunde), aktualisiere nicht die UI bei jedem einzelnen Event. Sammle Events für 500ms und aktualisiere dann einmal. Implementiert in WeWeb mit einem Debounce-Timer.

**Selektive Subscriptions**: Abonniere nur die Tabellen und Spalten, die du wirklich brauchst. Supabase Realtime unterstützt filter-basierte Subscriptions: `eq` (gleich), `lt` (kleiner als), `gt` (größer als). Nutze das, um nur für deinen Workspace relevante Events zu empfangen.

**Connection-Management**: Jede geöffnete Browser-Tab erstellt eine neue WebSocket-Verbindung. Bei 1.000 gleichzeitigen Nutzern sind das 1.000 offene Verbindungen. Supabase Realtime skaliert das gut, aber füge immer Reconnect-Logik für unterbrochene Verbindungen hinzu.

**Caching für aggregierte Daten**: Berechne KPI-Metriken nicht bei jedem Realtime-Event neu. Nutze Materialised Views in Supabase oder cached Aggregate-Abfragen, die sich alle 30 Sekunden aktualisieren.

Praxisbeispiel: Bestellungs-Dashboard für Mittelstand

Ein konkreter Anwendungsfall: ein Mittelstandsunternehmen in Deutschland (Produktion, Handel) möchte ein Live-Dashboard, das neue Bestellungen, den Produktionsstatus und Lagerbestände zeigt.

**Datenmodell**: `orders` (id, customer, status, value, created_at), `production_jobs` (id, order_id, status, updated_at), `inventory` (id, product_id, quantity, updated_at).

**Realtime-Setup**: Abonniere `orders` für INSERT (neue Bestellungen), `production_jobs` für UPDATE (Statusänderungen), `inventory` für UPDATE (Lagerbestandsänderungen).

**Dashboard**: KPI-Karten für "Bestellungen heute", "Offene Aufträge", "Lager-Warnungen". Aktivitätsfeed für die letzten 20 Ereignisse. Tabelle für offene Bestellungen mit Echtzeit-Status-Updates.

**Ergebnis**: Produktionsleiter sehen sofort, wenn eine neue Bestellung eingeht oder ein Auftragsstatus sich ändert — ohne F5 zu drücken. Das wurde bisher mit Excel-Tabellen und E-Mail-Benachrichtigungen gelöst. WeWeb + Supabase Realtime ersetzt das in 4–6 Wochen.

DSGVO-Überlegungen für Echtzeit-Dashboards

Echtzeit-Dashboards, die personenbezogene Daten anzeigen, haben spezifische DSGVO-Anforderungen:

**Zugriffsbeschränkung**: Nur berechtigte Nutzer sollen bestimmte Daten in Echtzeit sehen. Implementiere das mit Supabase RLS auf Realtime-Subscriptions — Nutzer empfangen nur Events für ihre autorisierten Zeilen.

**Keine unnötige Datenspeicherung im Browser**: Echtzeit-Daten, die nur zur Anzeige benötigt werden, sollten nicht dauerhaft im LocalStorage des Browsers gespeichert werden. WeWeb-Variablen sind session-basiert — das ist standardmäßig richtig.

**Audit-Log**: Für sensible Business-Daten (Finanz, HR) implementiere einen Audit-Log in Supabase, der aufzeichnet wer wann was gesehen hat. Das ist eine Best-Practice für DSGVO-Artikel-5 (Rechenschaftspflicht) und wird von deutschen Unternehmens-DPOs bei Lieferantenaudits geprüft.

**Supabase EU-Region**: Realtime-WebSocket-Verbindungen laufen über die Supabase-Region. Wenn du EU-Region wählst, bleiben alle Daten — auch temporäre Realtime-Events — innerhalb der EU.