Perjalanan Nyari Database buat Client-Side

Awalnya, aku cuma butuh tempat nyimpen data di sisi client. Simpel aja, nggak muluk-muluk. Pilihan pertama jatuh ke LocalStorage.

LocalStorage: Mudah tapi Terbatas

LocalStorage enak buat quick start:

• Tinggal localStorage.setItem() dan getItem(), beres.
• Bisa dipakai langsung tanpa setup macam-macam.

Tapi makin ke sini, makin kerasa batasannya:

• Kapasitas terbatas, biasanya cuma beberapa MB.
• Data disimpan sebagai string, jadi kalau mau nyimpen data kompleks agak ribet.
• Nggak ada query atau relasi data—jadi kalau butuh filter/filter-an agak susah.

Singkatnya: LocalStorage cocok buat hal kecil, tapi nggak scalable.

IndexedDB: Powerful tapi Ribet

Solusi "next level"-nya biasanya IndexedDB:

• Bisa nyimpen data dalam jumlah besar.
• Bisa simpan object lebih kompleks.

Tapi begitu coba… API-nya ribet 😅

• Banyak callback dan event handler.
• Syntax nggak "straightforward" kayak SQL.
• Query data rumit jadi bikin pusing.

"Kenapa nggak pakai sesuatu yang lebih familiar, kayak SQL, tapi tetap bisa jalan di client?"

SQLite + sql.js

Akhirnya nemu solusi: SQLite di browser lewat sql.js (SQLite yang dikompilasi ke WebAssembly).

Enaknya:

• Bisa query pakai SQL asli (SELECT, INSERT, UPDATE, dll).
• Data bisa disimpan di memori atau diexport/import ke file.
• Familiar bagi yang biasa pakai SQL di backend.

Contoh Kode sql.js

import initSqlJs from "sql.js";

async function runDemo() {
  const SQL = await initSqlJs({
    locateFile: file => `https://sql.js.org/dist/${file}`
  });

  const db = new SQL.Database();

  db.run("CREATE TABLE users (id INTEGER PRIMARY KEY, name TEXT, age INTEGER);");
  db.run("INSERT INTO users (name, age) VALUES (?, ?);", ["Alice", 25]);
  db.run("INSERT INTO users (name, age) VALUES (?, ?);", ["Bob", 30]);

  const result = db.exec("SELECT * FROM users;");
  console.log(result[0]);
}

runDemo();

PGlite: PostgreSQL di Browser 🚀

Selain sql.js, aku baru nemu PGlite (pglite.dev) yang memungkinkan menjalankan PostgreSQL di browser via WebAssembly.

Keunggulan:

• SQL standar, mirip PostgreSQL.
• Bisa offline-first, berjalan di browser, Node.js, Bun, atau Deno.
• Mendukung ekstensi PostgreSQL dan opsi penyimpanan persisten (IndexedDB di browser atau file di Node).

Contoh Penggunaan PGlite

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

const db = new PGlite();

// Membuat tabel
await db.exec(`
  CREATE TABLE IF NOT EXISTS users (
    id SERIAL PRIMARY KEY,
    name TEXT,
    age INTEGER
  );
`);

// Menambahkan data
await db.exec(`
  INSERT INTO users (name, age) VALUES
  ('Alice', 30),
  ('Bob', 25);
`);

// Mengambil data
const result = await db.query('SELECT * FROM users;');
console.log(result.rows);

• Untuk info lengkap dan dokumentasi: pglite.dev

Kesimpulan

Perjalanan singkatnya:

• LocalStorage → gampang, tapi terbatas.
• IndexedDB → powerful, tapi ribet.
• SQLite via sql.js → enak, SQL langsung di browser.
• PGlite → opsi baru yang menjanjikan, PostgreSQL di browser, offline-friendly, masih tahap eksplor.

Catatan

Tunggu update berikutnya! Nanti aku bakal buat tutorial lebih lengkap untuk:

• Menyimpan data di sql.js
• Export/import database
• Eksperimen dengan PGlite di browser

Jadi, ini masih versi pengenalan dan perbandingan dulu. Tutorial langkah-demi-langkah akan menyusul setelah aku eksplor PGlite lebih dalam.