local-first
Local-First
Overview
Local-first is an architecture where the application reads and writes to a local database, with changes syncing to the server in the background. The local database is the source of truth for the UI, providing instant reads, offline support, and optimistic writes by default.
When to use: Collaborative apps needing offline support, latency-sensitive UIs where instant response matters, apps with unreliable network conditions, real-time multiplayer features, mobile apps with intermittent connectivity.
When NOT to use: Simple CRUD apps with reliable connectivity, server-authoritative workflows (payments, inventory), content-heavy sites with minimal interactivity, apps where data freshness from the server is critical on every render.
Quick Reference
| Decision | Options | Key Consideration |
|---|---|---|
| Architecture model | Server-based, local-first, hybrid | Offline needs and latency tolerance drive the choice |
| Read path | Server fetch, local DB read, cache-then-network | Local reads are instant; server reads block on network |
| Write path | Server mutation, optimistic update, local-first write | Local writes never fail; sync handles delivery |
| Sync engine | Electric, Zero, PowerSync, Replicache, LiveStore | Postgres integration vs framework-agnostic |
| Client storage | IndexedDB, OPFS, SQLite WASM, PGlite | Capacity limits, query capability, browser support |
More from oakoss/agent-skills
playwright
|
200ui-ux-polish
Iterative UI/UX polishing workflow for web applications. Use when improving visual polish, refining desktop and mobile UX separately, running iterative enhancement cycles, applying design patterns like glassmorphism or bento grids, or auditing accessibility and WCAG compliance. Use for Stripe-level visual quality, responsive optimization, and design system alignment.
153find-skills
|
118knowledge-graph-builder
>
101tailwind
Tailwind CSS v4 patterns and design systems. Use when configuring Tailwind themes, building components, implementing dark mode, using container queries, migrating from v3, integrating shadcn/ui, or fixing build errors. Use for tailwind, css, styling, theme, design-tokens.
85pnpm-workspace
pnpm workspace monorepo management with filtering, catalogs, and shared configs. Use when setting up monorepos, managing workspace dependencies, filtering package commands, or sharing configuration across packages.
78