Is er een limiet aan het aantal Realtime-verbindingen in Supabase?

Ja. Het Free-plan staat 200 gelijktijdige Realtime-verbindingen toe; het Pro-plan ($25/maand) staat 500 toe; het Team-plan staat 10.000 toe. Voor een dashboard dat door 100 gelijktijdige gebruikers wordt bekeken heb je minimaal het Pro-plan nodig. Elke open browsertabblad telt als een verbinding.

Werkt Supabase Realtime met Row-Level Security?

Ja, volledig. Realtime respecteert RLS-policies — gebruikers ontvangen alleen WebSocket-updates voor rijen waartoe ze toegang hebben via hun RLS-policies. Dit is cruciaal voor multi-tenant dashboards waarbij je wilt dat elke tenant alleen zijn eigen data-updates ziet.

Hoe ga ik om met een bezoeker die zijn tabblad in de achtergrond heeft en WebSocket-updates mist?

Implementeer een reconciliatiestap: wanneer de pagina zichtbaarheid herkrijgt (Page Visibility API), voer een volledige query uit om eventueel gemiste updates op te halen. In WeWeb bind je dit aan het `visibilitychange`-event via een custom JavaScript-actie die de data-variabelen opnieuw laadt.

Kan ik Supabase Realtime gebruiken voor een multi-user samenwerkingtool?

Voor basisvormen van samenwerking (zien wie aan hetzelfde document werkt, live statusupdates) ja. Voor complexe real-time samenwerking (zoals Google Docs-achtige cursor-tracking en operationele transformatie) is Supabase Realtime niet voldoende — je hebt een gespecialiseerde oplossing zoals Liveblocks of PartyKit nodig.

Realtime dashboard bouwen met WeWeb + Supabase

Hoe Supabase Realtime werkt

Supabase Realtime is een WebSocket-gebaseerde service gebouwd op PostgreSQL's logische replicatiefunctie. Wanneer een rij in je database wordt ingevoegd, bijgewerkt of verwijderd, stuurt Supabase onmiddellijk een melding via een WebSocket-verbinding naar alle geabonneerde clients.

Drie typen Realtime-events: - **INSERT**: Nieuwe rij wordt toegevoegd - **UPDATE**: Bestaande rij wordt gewijzigd - **DELETE**: Rij wordt verwijderd

Je kunt filteren op tabel, schema en zelfs specifieke rijcondities (`filter: 'user_id=eq.' + userId`). Dit is efficiënt — clients ontvangen alleen de updates die relevant zijn voor hen, niet alle databasewijzigingen.

Belangrijke AVG-noot: Supabase Realtime respecteert Row-Level Security. Alleen data waartoe de ingelogde gebruiker toegang heeft, wordt via de WebSocket-verbinding gestuurd.

Supabase Realtime activeren

Standaard is Realtime uitgeschakeld per tabel. Activeer het in het Supabase-dashboard:

1. Ga naar Database → Replication 2. Schakel publicatie in voor de gewenste tabellen 3. Kies welke events je wilt: Inserts, Updates, Deletes

Alternatief via SQL: ```sql alter publication supabase_realtime add table orders; ```

Activeer Realtime alleen voor tabellen die live updates vereisen — niet voor elke tabel. Overmatig gebruik van Realtime kan Supabase-resourcelimieten beïnvloeden op kleinere plannen.

Row-Level Security werkt automatisch met Realtime — gebruikers ontvangen alleen updates voor rijen waartoe ze toegang hebben via hun RLS-policies.

Realtime subscriptions in WeWeb

WeWeb heeft native Supabase Realtime-ondersteuning. In een WeWeb-plugin voor Supabase:

1. Maak een nieuwe Realtime-subscription aan in WeWeb's Supabase-plugin 2. Selecteer de tabel (`orders`, `notifications`, etc.) 3. Kies de events (INSERT, UPDATE, DELETE) 4. Voeg optionele filters toe (bijv. alleen rijen waarbij `user_id` gelijk is aan de ingelogde gebruiker) 5. Bind het subscription-event aan een WeWeb-actie (bijv. haal de lijst opnieuw op, of voeg het nieuwe item lokaal toe aan de state)

Voor hoge frequentie updates (meerdere per seconde) is de beste aanpak: voeg het nieuwe item direct toe aan de lokale WeWeb-variabele (zonder een nieuwe database-query) en ververs de volledige lijst elke 30 seconden als synchronisatiemaatregel.

Dashboardcomponenten voor realtime data

Een typisch realtime SaaS-dashboard heeft vier componenten:

**1. Metriekenkaarten (KPI's)**: Totale bestellingen, actieve gebruikers, huidig omzet. Update via een Realtime-subscription die de aggregaties in de state bijwerkt of de samenvattingsquery opnieuw uitvoert.

**2. Live tabel/feed**: Een lijst van recente activiteiten (transacties, logboekvermeldingen, berichten). INSERT-events voegen nieuwe rijen toe aan de top; de lijst schuift omhoog. Limiteer tot 50–100 items voor prestaties.

**3. Realtimegrafiek**: Een lijndiagram dat omzet, aanmeldingen of events over tijd toont. Bij nieuwe data wordt het laatste datapunt bijgewerkt. WeWeb's Chart-component (gebaseerd op ApexCharts) ondersteunt dynamische data-updates.

**4. Meldingsfeed**: Inline meldingen wanneer significante events plaatsvinden (grote bestelling, nieuwe aanmelding, kritieke fout). Verdwijnt automatisch na 5 seconden.

Prestaties optimaliseren voor realtime dashboards

Realtime dashboards worden sloom als ze slecht zijn geoptimaliseerd. Drie prestatieregels:

**1. Gebruik aggregaten in de database, niet in de frontend**: Reken totalen en sommen op in Supabase (via Postgres Views of RPC-functies) in plaats van alle rijen te laden en in WeWeb op te tellen. Een query die `SUM(amount) WHERE date > 'vandaag'` retourneert is 100× sneller dan alle rijen laden.

**2. Pagineer live feeds**: Laad de laatste 25 items, niet de laatste 1.000. Gebruik "laad meer" of oneindig scrollen voor historische data.

**3. Debounce updates bij hoge frequentie**: Als je 10 INSERT-events per seconde verwacht, debounce de UI-update naar elk 500ms. Dit vermindert het aantal UI-renders significant en verhoogt de responsiviteit.

Realtime meldingen en alerts

Naast dashboard-updates kun je Supabase Realtime gebruiken voor in-app meldingen:

**Inscrhijf je op een `notifications`-tabel**: Wanneer een backend-proces (Supabase Edge Function of Xano) een nieuwe rij invoegt in de `notifications`-tabel voor een specifieke gebruiker, verschijnt er direct een melding in de WeWeb-app.

**Toast-meldingen**: Bind de INSERT-event aan een WeWeb toast-component. Wanneer een nieuwe melding binnenkomt, verschijnt de toast bovenaan het scherm met de meldingsinhoud.

**Ongelezen teller**: Houd een teller bij van ongelezen meldingen (een Supabase-query die ongelezen meldingen telt + een Realtime-subscription die de teller bijwerkt bij nieuwe inserts). Toon de teller in de navigatiebalk als een badge.