Data-Fetching Strategies

The application uses multiple data-fetching strategies depending on the use case:

Strategy	Where Used	When	Example
SSR (Server-Side Rendering)	Server Components	Every request	Pages, Layouts
Client-Side Fetching	Client Components	User interactions	Tables, Forms, Search
Server Actions	Forms, Mutations	Form submissions	Create, Update, Delete
API Routes	External services	Proxy requests	Voter search, Duplicate check

Data-Fetching Flow Diagram

graph TB
    A[User Request] --> B{Route Type}
    B -->|Page/Layout| C[Server Component]
    B -->|API Route| D[API Handler]
    B -->|Form Action| E[Server Action]
    
    C --> F[Service Layer]
    F --> G[Supabase Query]
    G --> H[PostgreSQL]
    
    D --> I{External Service}
    I -->|Voter Search| J[Directus/Elasticsearch]
    I -->|Duplicate Check| K[Redis]
    
    E --> F
    
    L[Client Component] --> M[useFetchTableData Hook]
    M --> N[Supabase Client]
    N --> G
    
    style C fill:#e1f5ff
    style E fill:#fff4e1
    style D fill:#ffe1f5
    style L fill:#e1ffe1

---