Offline-first patterns

Build applications that work offline with the outbox, optimistic updates, and automatic reconnection.

Strata Sync works offline by default. Every mutation applies locally, persists in an outbox, and syncs when connectivity returns.

How the outbox works

Every mutation (create, update, delete, archive) follows the same path through the outbox.


sequenceDiagram
    participant UI
    participant Client
    participant Outbox
    participant Server

    UI->>Client: client.update("Task", id, data)
    Client->>Client: Apply optimistically to identity map
    Client->>Outbox: Persist transaction (state: "queued")
    Client-->>UI: Component re-renders with new data
    Outbox->>Server: Send batch (state: "sent")
    Server-->>Outbox: Confirm with syncId (state: "awaitingSync")
    Server-->>Client: Delta arrives via WebSocket
    Client->>Outbox: Remove confirmed transaction (state: "completed")

The storage adapter stores the outbox in IndexedDB, so pending mutations survive page reloads, browser crashes, and device restarts. When the client starts, it replays any queued or sent transactions. For the full outbox lifecycle and state definitions, see .

Offline-first patterns

Build applications that work offline with the outbox, optimistic updates, and automatic reconnection.

Strata Sync works offline by default. Every mutation applies locally, persists in an outbox, and syncs when connectivity returns.

How the outbox works

Every mutation (create, update, delete, archive) follows the same path through the outbox.


sequenceDiagram
    participant UI
    participant Client
    participant Outbox
    participant Server

    UI->>Client: client.update("Task", id, data)
    Client->>Client: Apply optimistically to identity map
    Client->>Outbox: Persist transaction (state: "queued")
    Client-->>UI: Component re-renders with new data
    Outbox->>Server: Send batch (state: "sent")
    Server-->>Outbox: Confirm with syncId (state: "awaitingSync")
    Server-->>Client: Delta arrives via WebSocket
    Client->>Outbox: Remove confirmed transaction (state: "completed")

"use client"; import { observer } from "mobx-react-lite"; import { Suspense } from "react"; import { useQuery, useSyncClient, useIsOffline, usePendingCount, } from "@stratasync/react"; function OfflineBanner() { const isOffline = useIsOffline(); const { count, hasPending } = usePendingCount(); if (!isOffline) return null; return ( <div> You are offline. {hasPending && ( <span> {" "} {count} {count === 1 ? "change" : "changes"} will sync when you reconnect. </span> )} </div> ); } const TaskList = observer(function TaskList() { const { client } = useSyncClient(); const { data: tasks } = useQuery("Task", { where: (task) => (task as Record<string, string>).status !== "archived", orderBy: (a, b) => (b as Record<string, string>).createdAt.localeCompare( (a as Record<string, string>).createdAt ), }); async function addTask() { await client.create("Task", { title: "New task", status: "todo", createdAt: new Date().toISOString(), updatedAt: new Date().toISOString(), }); } async function toggleDone(taskId: string, currentStatus: string) { await client.update("Task", taskId, { status: currentStatus === "done" ? "todo" : "done", updatedAt: new Date().toISOString(), }); } return ( <div> <button onClick={addTask}>Add Task</button> <ul> {tasks.map((task) => { const t = task as Record<string, string>; return ( <li key={t.id}> <input type="checkbox" checked={t.status === "done"} onChange={() => toggleDone(t.id, t.status)} /> <span>{t.title}</span> </li> ); })} </ul> </div> ); }); export default function TaskManager() { return ( <div> <OfflineBanner /> <Suspense fallback={<p>Loading...</p>}> <TaskList /> </Suspense> </div> ); }

Offline-first patterns

How the outbox works

Offline-first patterns

How the outbox works

Optimistic updates

Monitoring connection state

Pending mutation tracking

Preventing data loss on tab close

Reconnection flow

Best practices

Complete example: offline-capable task manager