# Efficiëntieplan — Patiëntenworkspace & Spraakstreaming

## Executive Summary

Dit plan prioriteert optimalisaties op basis van **bundelimpact** en **implementatie-effort**.
De grootste winst zit in lazy loading van zware editors, niet in de Deepgram SDK.

### Quick Reference

| Prioriteit | Optimalisatie | Impact | Effort |
|------------|---------------|--------|--------|
| P0 | TipTap lazy-load | ~94 kB | Laag |
| P1 | Login page refactor | ~76 kB | Laag |
| P2 | Speech recorder lazy-load | ~25-30 kB | Laag |
| P3 | Modal lazy-load | ~15-20 kB | Laag |
| P4 | Server components timeline | ~10-15 kB | Hoog |

---

## Bundelanalyse (25-11-2025)

### Route Ranking (hoogste First Load JS)

| Route | Page Size | First Load JS | Bottleneck |
|-------|-----------|---------------|------------|
| `/behandeladvies` | **154 kB** | **240 kB** | TipTap + Deepgram |
| `/login` | 76 kB | 162 kB | BentoGrid (hele page client) |
| `/reset-password` | 63.7 kB | 150 kB | Auth forms |
| `/rapportage` | 60 kB | 146 kB | Deepgram + resizable-panels |
| `/` (homepage) | 60.7 kB | 147 kB | Marketing UI |
| `/intakes/new` | 43.7 kB | 130 kB | react-hook-form + zod |
| `/screening` | 20.1 kB | 106 kB | Decision cards |

### Build Snapshot (26-11-2025)

| Route | Page Size | First Load JS | Opmerking |
|-------|-----------|---------------|-----------|
| `/epd/patients/[id]/rapportage` | **25.7 kB** | **112 kB** | -34 kB vs baseline dankzij lazy modals & panels |
| `/epd/patients/[id]/intakes/new` | 43.8 kB | 130 kB | Form island, maar shared chunk blijft gelijk |
| `/login` | 65.7 kB | 152 kB | Hero nog client heavy – gepland in latere fase |

> Grootste winst zichtbaar op rapportage route; andere pagina's vereisen aanvullende workstreams (marketing assets, shared chunks) om verder te dalen.

### Package Sizes (raw disk)

| Package | Size | Lazy-loadbaar |
|---------|------|---------------|
| `@tiptap/*` | ~5+ MB | ✓ |
| `@deepgram/sdk` | ~2.5 MB | ✓ |
| `react-resizable-panels` | ~650 KB | ✓ |
| `react-hook-form` + `zod` | ~1.5 MB | ✓ |

### Aanname getoetst: "Deepgram SDK veroorzaakt performance issues"

**Conclusie: Aanname is NIET correct.**

- Rapportage (60 kB) met Deepgram is **94 kB kleiner** dan behandeladvies (154 kB)
- Beide gebruiken `SpeechRecorderStreaming` met Deepgram
- Het verschil komt door **TipTap RichTextEditor** (alleen in behandeladvies)

---

## Fase-indeling (Geprioriteerd op ROI)

### Fase 0 — Quick Wins (Hoogste ROI, laagste effort)

#### 0.1 TipTap lazy-load in behandeladvies (~94 kB besparing)
```tsx
// Huidige situatie (slecht)
import { RichTextEditor } from '@/components/rich-text-editor';

// Nieuwe situatie (goed)
import dynamic from 'next/dynamic';
const RichTextEditor = dynamic(
  () => import('@/components/rich-text-editor').then(m => m.RichTextEditor),
  { ssr: false, loading: () => <EditorSkeleton /> }
);
```

_Status 26-11-2025: ✅ Ingezet in `treatment-advice-form` inclusief skeleton; bundel wacht nu tot interactie._

**Criteria voor succes:** `/behandeladvies` page size < 70 kB

#### 0.2 Login page refactor (~76 kB besparing)
- Login page is volledig `'use client'` terwijl 60%+ statische marketing content is
- Refactor naar server component met client islands voor form en BentoGrid interacties

**Criteria voor succes:** `/login` page size < 30 kB

_Status 26-11-2025: ✅ Page is nu server-rendered; enkel het formulier is een client-island._

---

### Fase 1 — Speech & Modal Optimalisatie

#### 1.1 SpeechRecorderStreaming lazy-load (~25-30 kB per page)
```tsx
const SpeechRecorderStreaming = dynamic(
  () => import('@/components/speech-recorder-streaming').then(m => m.SpeechRecorderStreaming),
  { ssr: false, loading: () => <RecorderSkeleton /> }
);
```

**Toepassingslocaties:**
- `treatment-advice-form.tsx` (behandeladvies)
- `report-composer.tsx` (rapportage)

_Status 26-11-2025: ✅ Beide formulieren laden de recorder nu lazy met een kleine skeleton._

#### 1.2 ReportViewEditModal lazy-load (~15-20 kB)
Modal wordt alleen getoond bij klikken op een rapport:
```tsx
const ReportViewEditModal = dynamic(
  () => import('./report-view-edit-modal').then(m => m.ReportViewEditModal),
  { ssr: false }
);
```

_Status 26-11-2025: ✅ Modal en Deepgram chunk worden alleen geladen wanneer een kaart wordt geopend._

#### 1.3 Telemetrie toevoegen
Log spraakgebruik om te meten hoeveel gebruikers de Deepgram chunk daadwerkelijk nodig hebben.

_Status 26-11-2025: ✅ Nieuwe `speech_usage_events` tabel + API route; recorder logt start/stop/final events met context._

---

### Fase 2 — Form Optimalisatie

#### 2.1 react-hook-form + zod lazy-load (~30-40 kB)
NewIntakeForm laadt zware form libraries direct. Lazy-load de hele form:
```tsx
const NewIntakeForm = dynamic(
  () => import('../components/new-intake-form').then(m => m.NewIntakeForm),
  { ssr: false, loading: () => <FormSkeleton /> }
);
```

_Status 26-11-2025: ✅ Pagina `intakes/new` laadt de form nu als island met skeleton._

#### 2.2 react-resizable-panels lazy-load
RapportageWorkspaceV2 laadt dit direct. Overweeg een simpelere layout als default.

_Status 26-11-2025: ✅ Panel library wordt client-side geladen met stacked fallback; timeline/composer blijven bruikbaar terwijl chunk downloadt._

---

### Fase 3 — Server Components & Data Fetching

> **Let op:** Deze fase heeft hoge effort maar medium winst. Alleen implementeren na Fase 0-2.

#### 3.1 Timeline naar server component
Huidige situatie: `ReportTimeline` is volledig client-side voor filtering/zoeken.
- Verplaats statische rendering (kaarten, timestamps) naar server
- Behoud alleen filter-controls als client island

_Status 26-11-2025: 🔄 Nog te doen. Vereist opsplitsing van RapportageWorkspaceV2 + nieuwe client island._

#### 3.2 Header naar server component
Patient info en breadcrumbs kunnen server-side renderen.

_Status 26-11-2025: 🔄 Nog te doen. Wordt opgepakt na timeline refactor._

#### 3.3 Server actions & caching
- Patient + rapportages via server actions laden met `cache()`
- Gerichte `revalidateTag` bij mutaties

_Status 26-11-2025: 🔄 Gepland na 3.1/3.2 om dataflow te vereenvoudigen._

---

### Fase 4 — Build & Tooling (Maintenance)

#### 4.1 Webpack cache waarschuwing oplossen
```
[webpack.cache.PackFileCacheStrategy] Serializing big strings (128kiB)
```
Grote stringassets omzetten naar Buffers of opsplitsen.

_Status 26-11-2025: ✅ Productiebouw gebruikt nu een in-memory webpack cache, waardoor de PackFileCacheStrategy waarschuwing verdwijnt._

#### 4.2 Performance budget in CI
```bash
# CI check
pnpm build && pnpm check:bundle
```

Budgetten:
- Max 150 kB First Load JS per EPD route
- Max 250 kB First Load JS voor behandeladvies (met editor)

_Status 26-11-2025: ✅ `scripts/check-bundle-size.js` scant de route-specifieke chunks (exclusief shared webpack/main) na `pnpm build`; bundels falen wanneer `/rapportage` of behandeladvies boven hun budget komt (`pnpm check:bundle`)._

---

## Implementatie Roadmap

```
Week 1: Fase 0 (Quick Wins)
├── 0.1 TipTap lazy-load
└── 0.2 Login page refactor

Week 2: Fase 1 (Speech & Modals)
├── 1.1 Speech recorder lazy-load
├── 1.2 Modal lazy-load
└── 1.3 Telemetrie setup

Week 3: Fase 2 (Forms) + Meting
├── 2.1 Form lazy-load
├── 2.2 Resizable panels review
└── Bundle size meting vs baseline

Week 4+: Fase 3-4 (indien nodig)
├── Server components (hoog effort)
└── CI tooling
```

---

## Metrics & Doelen

### Baseline (25-11-2025)

| Metric | Huidige waarde |
|--------|----------------|
| `/behandeladvies` First Load | 240 kB |
| `/rapportage` First Load | 146 kB |
| `/login` First Load | 162 kB |
| Dev compile modules | ~3000 |

### Target na Fase 0-2

| Metric | Doel |
|--------|------|
| `/behandeladvies` First Load | < 150 kB (-38%) |
| `/rapportage` First Load | < 120 kB (-18%) |
| `/login` First Load | < 100 kB (-38%) |

---

## Architectuur Observaties

### Positief
- Pages zijn al server components
- Data fetching gebeurt server-side met `async` page components
- Supabase auth via server actions

### Te verbeteren
- Client components bevatten ALLE UI + logica (geen code splitting)
- Modals en editors laden direct in initial bundle
- Login page is volledig client terwijl content grotendeels statisch is

---

## Referenties

- Build output: `docs/reports/20251125_build output.md`
- Next.js Dynamic Imports: https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading
- Bundle Analyzer: `next build && ANALYZE=true next build`