Konfigurera Supabase Realtime
Supabase Realtime sänder databasändringar (INSERT, UPDATE, DELETE) till prenumererade klienter över en WebSocket-anslutning. Så här aktiverar du det:
1. I din Supabase-dashboard, gå till Database → Replication 2. Aktivera replikering för de tabeller du vill bevaka (t.ex. `metrics`, `events`, `orders`) 3. Ange RLS-policys på dessa tabeller — Supabase Realtime respekterar RLS, så användare får bara ändringar på rader de har tillåtelse att se
Detta tar 2 minuter. Det hårda arbetet är på frontend — att hantera strömmen av ändringar och uppdatera UI:t.
För svenska B2B SaaS: realtids-dashboards är en stark differentierande funktion. Kunder som iZettle-konkurrenter kan erbjuda butikschefer live-försäljningsöversikter — ett konkret affärsvärde som motiverar premium-prissättning.
Ansluta WeWeb till Supabase Realtime
WeWebs Supabase-plugin stöder realtidsprenumerationer nativt. I WeWeb:
1. Gå till Plugins → Supabase → din datakälla 2. Aktivera "Realtime" på den kollektion du vill bevaka 3. WeWeb prenumererar automatiskt på ändringar och uppdaterar bundna element när en ändring anländer
För ett metrik-dashboard bundet till en `metrics`-tabell: lägg till en Collection bunden till tabellen, aktivera Realtime och bind diagram-/nummerelement till kollektionen. När en ny metrisk rad infogas i Supabase uppdateras dashboarden på under 500 ms utan någon användaråtgärd.
Detta fungerar sömlöst med Supabase EU-väst-regionen — inga konfigurationsändringar behövs för att hålla data i Europa.
Bygga dashboard-layouten
Ett typiskt realtids-dashboard har tre zoner:
**KPI-rad**: 3–4 stora nummerkort överst. Varje bunden till ett aggregat (SUM, COUNT, AVG) från en Supabase-vy. I WeWeb, skapa en vy i Supabase som förkalkylerar aggregat och bind KPI-korten till den vyns realtidskollektion.
**Diagram**: Linjediagram för tidsseriedata, stapeldiagram för jämförelser, cirkeldiagram för fördelning. WeWeb har en inbyggd Chart-komponent driven av Chart.js. Bind `data`-prop till en Supabase-kollektion ordnad efter `created_at`.
**Datatabell**: En sorterbar, filtrerbar tabell för råa händelser. WeWebs DataGrid-komponent med sökning, sortering och paginering. Aktivera Realtime så att nya rader visas överst när de anländer.
Tidsintervallsfiltrering
Varje dashboard behöver tidsintervallskontroller. Mönster:
1. Lägg till en filterfält-komponent med förinställda knappar: Senaste 24h, Senaste 7d, Senaste 30d, Anpassat intervall 2. Skapa en sidvariabel `dateRange` med start- och sluttidsstämplar 3. Skicka `dateRange` som ett filter till varje Supabase-kollektion: `.gte("created_at", dateRange.start).lte("created_at", dateRange.end)` 4. När användaren väljer ett annat intervall, uppdatera `dateRange` — alla kollektioner hämtar om automatiskt
För anpassade datumintervall, använd WeWebs Date Picker-komponent och bind båda inmatningarna till `dateRange.start` och `dateRange.end`.
För svenska B2B-kunder: lägg till kvartalsvyer (Q1–Q4) och räkenskapsårsvy som snabbval — månadsbaserade filter räcker sällan för ekonomiavdelningens användning.
Row-Level Security för multi-tenant dashboards
För SaaS-dashboards där varje kund bara ser sin data:
Skapa en RLS-policy på metrics-tabellen: `CREATE POLICY "Users see own org metrics" ON metrics FOR SELECT USING (org_id IN (SELECT org_id FROM memberships WHERE user_id = auth.uid()));`
Denna policy innebär att samma dashboard-URL fungerar för alla kunder — var och en ser bara sin organisations data. Ingen filtrering behövs i WeWeb. Supabase tillämpar det på databasnivå.
Kritiskt: testa detta genom att logga in som användare från två olika organisationer och bekräfta att data är isolerad. En RLS-bugg i ett dashboard är en allvarlig dataläcka.
Under GDPR är dataläckor inte bara ett varumärkesproblem — de kan leda till anmälan till Integritetsskyddsmyndigheten (IMY) och böter. Testa RLS-isolation innan varje produktionsrelease.
Prestandaoptimering för stora datamängder
Dashboards med miljontals rader saktar ner snabbt om du kör aggregat på rådata.
**Skapa Supabase-vyer för aggregat**: Skapa en materialiserad vy, t.ex. `CREATE MATERIALIZED VIEW daily_metrics AS SELECT DATE(created_at), COUNT(*), SUM(value) FROM events GROUP BY DATE(created_at)`. Uppdatera den materialiserade vyn varje timme via ett Supabase Edge Function cron-jobb.
**Använd index**: Lägg till ett index på `(org_id, created_at)` för varje tabell filtrerad efter organisation och tid. Det förvandlar en 5-sekunders fråga till en 50 ms-fråga.
**Paginera råtabellen**: Lägg aldrig in alla rader i dashboarden. Använd Supabase `.range(0, 99)` för datatabellen och låt användare paginera. Det håller initial laddning snabb oavsett totalt radantal. Svenska B2B-kunder med år av historiska data kommer att uppskatta snabba laddningstider även vid stora datamängder.