Local-First Architecture — Khi ứng dụng web không cần chờ server để phản hồi

Posted on: 4/26/2026 9:12:52 PM

Bạn đã bao giờ click một nút trên ứng dụng web và phải chờ 200-500ms để server phản hồi chưa? Với kiến trúc Local-First, thời gian phản hồi đó giảm xuống dưới 1ms — vì dữ liệu đã nằm sẵn trên thiết bị của bạn. Không cần internet, không cần chờ đợi, ứng dụng phản hồi ngay lập tức như phần mềm desktop.

Local-First là gì?

Local-First là mô hình kiến trúc phần mềm trong đó dữ liệu được lưu trữ và xử lý trước tiên trên thiết bị người dùng (browser, mobile, desktop), sau đó đồng bộ ngầm với server khi có kết nối mạng. Khác với kiến trúc client-server truyền thống nơi mọi thao tác đều phải gửi request lên server, Local-First đảo ngược mô hình này: đọc và ghi xảy ra tức thì trên local, đồng bộ là bước sau.

Tại sao Cloud-Only đang gặp giới hạn?

Mô hình cloud-only (client gửi mọi request lên server) có 3 vấn đề lớn trong thực tế:

Kiến trúc tổng quan Local-First

graph TD
    subgraph Client["🖥️ Client (Browser/Mobile)"]
        UI["UI Layer
Vue / React"]
        LQ["Live Query
Reactive Binding"]
        PG["PGlite
PostgreSQL WASM"]
        IDB["IndexedDB / OPFS
Persistent Storage"]
    end

    subgraph Sync["🔄 Sync Layer"]
        SE["Sync Engine
ElectricSQL / Zero"]
        CR["CRDT Resolver
Conflict Resolution"]
    end

    subgraph Server["☁️ Server"]
        API["API Gateway"]
        PGS["PostgreSQL
Source of Truth"]
        WAL["WAL Stream
Change Data Capture"]
    end

    UI --> LQ
    LQ --> PG
    PG --> IDB
    PG <--> SE
    SE <--> CR
    SE <--> WAL
    WAL --> PGS
    API --> PGS

    style UI fill:#e94560,stroke:#fff,color:#fff
    style PG fill:#336791,stroke:#fff,color:#fff
    style PGS fill:#336791,stroke:#fff,color:#fff
    style SE fill:#4CAF50,stroke:#fff,color:#fff
    style CR fill:#ff9800,stroke:#fff,color:#fff
    style LQ fill:#2196F3,stroke:#fff,color:#fff
    style IDB fill:#f8f9fa,stroke:#e0e0e0,color:#2c3e50
    style API fill:#f8f9fa,stroke:#e0e0e0,color:#2c3e50
    style WAL fill:#f8f9fa,stroke:#e0e0e0,color:#2c3e50

PGlite — PostgreSQL chạy trên WebAssembly

PGlite là bản build WebAssembly đầy đủ của PostgreSQL, được phát triển bởi team ElectricSQL. Thay vì chạy một database server riêng biệt, PGlite nhúng trực tiếp Postgres vào ứng dụng JavaScript/TypeScript như một thư viện in-process — chỉ 3MB gzipped.

Cài đặt và khởi tạo

npm install @electric-sql/pglite

import { PGlite } from '@electric-sql/pglite';

// In-memory database (mất khi refresh)
const db = new PGlite();

// Persistent với IndexedDB (giữ dữ liệu qua session)
const db = new PGlite('idb://my-app-db');

// Persistent với OPFS (Origin Private File System — nhanh hơn IndexedDB)
const db = new PGlite('opfs://my-app-db');

Sử dụng SQL đầy đủ

PGlite hỗ trợ gần như toàn bộ SQL syntax của PostgreSQL, bao gồm JOIN, subquery, window functions, CTE, JSON operators:

// Tạo bảng với đầy đủ constraint
await db.exec(`
  CREATE TABLE IF NOT EXISTS tasks (
    id SERIAL PRIMARY KEY,
    title TEXT NOT NULL,
    completed BOOLEAN DEFAULT false,
    priority INTEGER CHECK (priority BETWEEN 1 AND 5),
    created_at TIMESTAMP DEFAULT NOW(),
    metadata JSONB DEFAULT '{}'
  )
`);

// Insert dữ liệu
await db.query(
  'INSERT INTO tasks (title, priority, metadata) VALUES ($1, $2, $3)',
  ['Deploy Local-First app', 3, JSON.stringify({ tags: ['devops', 'pglite'] })]
);

// Query phức tạp — chạy ngay trên browser
const result = await db.query(`
  SELECT
    priority,
    COUNT(*) as total,
    COUNT(*) FILTER (WHERE completed) as done,
    ROUND(COUNT(*) FILTER (WHERE completed)::numeric / COUNT(*) * 100, 1) as pct
  FROM tasks
  GROUP BY priority
  ORDER BY priority
`);
console.log(result.rows);
// [{ priority: 1, total: 5, done: 3, pct: 60.0 }, ...]

Extensions — pgvector trong browser

PGlite hỗ trợ dynamic extension loading, bao gồm pgvector cho vector search và PostGIS cho geospatial — chạy hoàn toàn trên client:

import { PGlite } from '@electric-sql/pglite';
import { vector } from '@electric-sql/pglite/vector';

const db = new PGlite({
  extensions: { vector }
});

await db.exec('CREATE EXTENSION IF NOT EXISTS vector');
await db.exec(`
  CREATE TABLE documents (
    id SERIAL PRIMARY KEY,
    content TEXT,
    embedding vector(384)
  )
`);

// Similarity search ngay trên browser — không cần gọi server!
const similar = await db.query(`
  SELECT content, embedding <=> $1::vector AS distance
  FROM documents
  ORDER BY distance
  LIMIT 5
`, [queryEmbedding]);

CRDT — Giải quyết xung đột không cần server

Conflict-free Replicated Data Types (CRDT) là nền tảng toán học cho phép nhiều thiết bị chỉnh sửa cùng dữ liệu đồng thời mà không cần server trung gian phân xử. CRDTs đảm bảo rằng mọi replica sẽ hội tụ về cùng một trạng thái thông qua các tính chất toán học: giao hoán (commutative), kết hợp (associative) và lũy đẳng (idempotent).

sequenceDiagram
    participant A as Device A
    participant S as Sync Server
    participant B as Device B

    Note over A,B: Cả hai đang offline
    A->>A: Thêm task "Deploy v2"
    B->>B: Thêm task "Fix bug #42"
    A->>A: Đánh dấu "Setup CI" = done

    Note over A,B: Kết nối lại
    A->>S: Sync delta changes
    B->>S: Sync delta changes
    S->>S: CRDT merge (auto)
    S->>A: Merged state
    S->>B: Merged state

    Note over A,B: Cả hai có cùng state
không conflict, không data loss

Các loại CRDT phổ biến

Sync Engines — Cầu nối Local và Cloud

Sync Engine là lớp trung gian chịu trách nhiệm đồng bộ dữ liệu giữa local database (PGlite/SQLite) và server database (PostgreSQL). Đây là thành phần quan trọng nhất quyết định trải nghiệm real-time của ứng dụng.

ElectricSQL + PGlite trong thực tế

import { PGlite } from '@electric-sql/pglite';
import { electricSync } from '@electric-sql/pglite-sync';
import { live } from '@electric-sql/pglite/live';

const db = new PGlite({
  dataDir: 'idb://my-app',
  extensions: {
    electric: electricSync(),
    live
  }
});

// Định nghĩa "shape" — chỉ sync dữ liệu cần thiết
await db.electric.syncShapeToTable({
  shape: {
    url: 'https://api.myapp.com/v1/shape',
    params: { table: 'tasks', where: 'user_id = 42' }
  },
  table: 'tasks',
  primaryKey: ['id']
});

// Live query — UI tự cập nhật khi dữ liệu thay đổi
const unsubscribe = db.live.query(
  'SELECT * FROM tasks WHERE completed = false ORDER BY priority',
  [],
  (results) => {
    // Callback được gọi mỗi khi có thay đổi
    renderTaskList(results.rows);
  }
);

Tích hợp với Vue.js

Local-First kết hợp rất tốt với Vue.js nhờ hệ thống reactivity sẵn có. PGlite cung cấp live queries kết hợp cùng ref() và watchEffect() của Vue tạo ra trải nghiệm mượt mà:

// composables/usePGlite.ts
import { ref, onMounted, onUnmounted } from 'vue';
import { PGlite } from '@electric-sql/pglite';
import { live } from '@electric-sql/pglite/live';

let db: PGlite | null = null;

export async function getDB() {
  if (!db) {
    db = new PGlite({
      dataDir: 'idb://vue-app',
      extensions: { live }
    });
    await db.exec(`
      CREATE TABLE IF NOT EXISTS notes (
        id SERIAL PRIMARY KEY,
        title TEXT NOT NULL,
        content TEXT DEFAULT '',
        updated_at TIMESTAMP DEFAULT NOW()
      )
    `);
  }
  return db;
}

export function useLiveQuery<T>(sql: string, params: any[] = []) {
  const rows = ref<T[]>([]);
  const loading = ref(true);
  let unsub: (() => void) | null = null;

  onMounted(async () => {
    const db = await getDB();
    unsub = db.live.query(sql, params, (result) => {
      rows.value = result.rows as T[];
      loading.value = false;
    });
  });

  onUnmounted(() => unsub?.());

  return { rows, loading };
}

<!-- NoteList.vue -->
<script setup lang="ts">
import { useLiveQuery, getDB } from './composables/usePGlite';

interface Note { id: number; title: string; content: string; updated_at: string }

const { rows: notes, loading } = useLiveQuery<Note>(
  'SELECT * FROM notes ORDER BY updated_at DESC'
);

async function addNote() {
  const db = await getDB();
  await db.query(
    'INSERT INTO notes (title) VALUES ($1)',
    [`Note ${Date.now()}`]
  );
  // Không cần cập nhật state — live query tự phản ứng!
}
</script>

<template>
  <div>
    <button @click="addNote">+ New Note</button>
    <p v-if="loading">Loading...</p>
    <ul v-else>
      <li v-for="note in notes" :key="note.id">
        {{ note.title }}
      </li>
    </ul>
  </div>
</template>

Storage Backends — IndexedDB vs OPFS

PGlite hỗ trợ nhiều storage backend cho persistent data trên browser:

Chiến lược Migration từ Cloud-Only sang Local-First

Không cần rewrite toàn bộ ứng dụng. Áp dụng chiến lược Hybrid-First — migrate dần từng phần:

graph LR
    subgraph Phase1["Phase 1: Cache Layer"]
        A1["API Response"] --> B1["PGlite Cache"]
        B1 --> C1["UI đọc từ cache"]
    end

    subgraph Phase2["Phase 2: Offline Write"]
        A2["User action"] --> B2["Ghi vào PGlite"]
        B2 --> C2["Sync queue"]
        C2 --> D2["Server khi online"]
    end

    subgraph Phase3["Phase 3: Full Local-First"]
        A3["PGlite = primary"]
        B3["ElectricSQL sync"]
        C3["Server = backup"]
        A3 <--> B3
        B3 <--> C3
    end

    Phase1 --> Phase2
    Phase2 --> Phase3

    style A1 fill:#f8f9fa,stroke:#e0e0e0,color:#2c3e50
    style B1 fill:#336791,stroke:#fff,color:#fff
    style C1 fill:#e94560,stroke:#fff,color:#fff
    style A2 fill:#e94560,stroke:#fff,color:#fff
    style B2 fill:#336791,stroke:#fff,color:#fff
    style C2 fill:#ff9800,stroke:#fff,color:#fff
    style D2 fill:#f8f9fa,stroke:#e0e0e0,color:#2c3e50
    style A3 fill:#336791,stroke:#fff,color:#fff
    style B3 fill:#4CAF50,stroke:#fff,color:#fff
    style C3 fill:#f8f9fa,stroke:#e0e0e0,color:#2c3e50

Phase 1 — PGlite làm cache layer

// Thay vì gọi API mỗi lần render, cache vào PGlite
async function fetchAndCache(endpoint: string) {
  const db = await getDB();

  // Đọc cache trước (instant)
  const cached = await db.query(
    'SELECT data, cached_at FROM api_cache WHERE endpoint = $1',
    [endpoint]
  );

  if (cached.rows.length > 0) {
    const age = Date.now() - new Date(cached.rows[0].cached_at).getTime();
    if (age < 5 * 60 * 1000) { // Cache 5 phút
      return JSON.parse(cached.rows[0].data);
    }
  }

  // Fetch từ server nếu cache miss hoặc expired
  const response = await fetch(endpoint);
  const data = await response.json();

  await db.query(
    `INSERT INTO api_cache (endpoint, data, cached_at)
     VALUES ($1, $2, NOW())
     ON CONFLICT (endpoint)
     DO UPDATE SET data = $2, cached_at = NOW()`,
    [endpoint, JSON.stringify(data)]
  );

  return data;
}

Phase 2 — Offline Write Queue

// Ghi vào local trước, sync lên server sau
async function createTask(title: string, priority: number) {
  const db = await getDB();
  const id = crypto.randomUUID();

  // Ghi vào PGlite ngay lập tức
  await db.query(
    `INSERT INTO tasks (id, title, priority, synced) VALUES ($1, $2, $3, false)`,
    [id, title, priority]
  );

  // Đẩy vào sync queue
  await db.query(
    `INSERT INTO sync_queue (entity, entity_id, action, payload)
     VALUES ('tasks', $1, 'INSERT', $2)`,
    [id, JSON.stringify({ id, title, priority })]
  );

  // Thử sync ngay nếu có mạng
  if (navigator.onLine) {
    await processSyncQueue();
  }
}

// Lắng nghe khi có mạng trở lại
window.addEventListener('online', () => processSyncQueue());

Performance so sánh thực tế

Khi nào KHÔNG nên dùng Local-First?

Local-First không phải silver bullet. Có những trường hợp cloud-only vẫn là lựa chọn đúng:

Hệ sinh thái Local-First 2026

Kết luận

Local-First Architecture không phải là sự thay thế hoàn toàn cho cloud — mà là sự tiến hóa của cách chúng ta xây dựng ứng dụng web. Với PGlite đưa PostgreSQL vào browser chỉ 3MB, ElectricSQL cung cấp sync layer mạnh mẽ, và CRDTs giải quyết xung đột một cách toán học, developers giờ có đủ công cụ để xây dựng ứng dụng phản hồi tức thì, hoạt động offline, và tôn trọng quyền sở hữu dữ liệu của người dùng.

Bắt đầu với Phase 1 (cache layer) — chỉ cần vài chục dòng code PGlite là bạn đã thấy sự khác biệt rõ rệt về tốc độ. Từ đó, migrate dần sang full Local-First khi sẵn sàng.

Tham khảo

• PGlite — Trang chủ chính thức
• ElectricSQL — Sync engine cho PostgreSQL
• PGlite GitHub Repository
• Ink & Switch — Local-First Software: You Own Your Data (paper gốc)
• The Local-First Manifesto: Why the Cloud is Losing Its Luster in 2026
• localfirst.fm — Podcast chuyên về Local-First