Backend vs Local Mode

Overview

ImportCSV can be used in two modes:

• Local Mode: Configuration in frontend code
• Backend Mode: Configuration stored in database, managed via admin dashboard

Feature Comparison

When to Use Local Mode

• Quick prototypes or POCs
• Simple, static import requirements
• Minimal infrastructure preferred
• Configuration as code approach

Local Mode Example

<CSVImporter
  columns={[
    { 
      id: 'email', 
      label: 'Email',
      type: 'email',
      validators: [{ type: 'required' }]
    },
    { 
      id: 'name', 
      label: 'Name',
      validators: [{ type: 'required' }]
    }
  ]}
  onComplete={(data) => console.log(data)}
/>

When to Use Backend Mode

• Centralized configuration management
• Non-developers managing importers via UI
• Webhook notifications and background processing
• Authentication and multi-app configuration reuse
• API access for programmatic control

Backend Mode Example

// Configuration stored in database, managed via admin
<CSVImporter
  importerKey="cust_import_001"
  apiUrl="https://api.yourapp.com"
  onComplete={(data) => console.log(data)}
/>

Migration Path

1. Set up backend: PostgreSQL + Redis + FastAPI + Clerk auth
2. Create importers: Recreate columns and validation rules in admin UI
3. Update frontend:

   // Before: <CSVImporter columns={[...]} onComplete={handleComplete} />
   // After: <CSVImporter importerKey="your-key" apiUrl="https://..." onComplete={handleComplete} />

Performance Considerations

Local Mode

• Bundle Size: All configuration in frontend bundle
• Processing: Client-side only
• Scalability: Limited by browser resources

Backend Mode

• Bundle Size: Minimal (just importer key)
• Processing: Server-side with Redis Queue
• Scalability: Horizontal scaling possible

Decision Matrix

Hybrid Approach

Start with local mode for your MVP, then migrate to backend mode as needs grow. This minimizes initial complexity while providing a clear upgrade path.