Hadis - Ensiklopedia Kutubut Tis'ah

Tantangan Data Skala Besar di Lingkungan Edge

Menyajikan koleksi lengkap 9 Kitab Hadis (Kutubut Tis'ah) yang mencakup 38.102 hadis (~70 MB data teks) dalam aplikasi web modern menghadirkan tantangan performa:

1. Jika dataset JSON berukuran puluhan megabyte diunduh langsung ke browser, waktu muat awal (initial page load) menjadi lambat dan menghabiskan kuota pengguna.
2. Lingkungan serverless edge seperti Cloudflare Workers membatasi ukuran bundel skrip maksimal 3 MB dan waktu eksekusi CPU 50ms, sehingga tidak memungkinkan memproses berkas JSON besar di memori runtime secara berulang.

Proyek Hadis mengatasi masalah ini dengan memigrasikan seluruh dataset ke database relasional terdistribusi Cloudflare D1 yang dikelola menggunakan NuxtHub dan Drizzle ORM, dipadukan dengan strategi stale-while-revalidate (SWR) caching di Nitro engine.

Arsitektur & Keunggulan Teknis

Aplikasi dibangun dengan tumpukan teknologi modern Nuxt 4 dan Nuxt UI v4 untuk menghasilkan pengalaman membaca yang cepat, bersih, dan aksesibel:

• Database Edge Cloudflare D1 & Drizzle ORM: Sebanyak 38.102 data hadis disimpan dan diindeks secara terstruktur pada kolom (narrator) dan (narrator, number). Kueri paginasi dan filter nomor hadis dieksekusi langsung di edge network dengan latensi di bawah 10ms.
• Paginasi Ringan & SWR Caching: Server hanya mengirimkan 15 hadis per halaman (~10–15 KB payload). Respon kueri di-cache di layer Nitro (maxAge: 3600, swr: true), sehingga navigasi halaman dan pembacaan ulang berjalan instan (0ms).
• Tipografi Arab Responsif: Menggunakan font Amiri yang dioptimalkan untuk harakat Arab, dilengkapi kontrol penyesuaian ukuran huruf (font scaling) dan pembagi terjemahan yang jelas.
• Sistem Bookmark Lokal: Memanfaatkan penyimpanan lokal (LocalStorage) reaktif melalui Vue composables, memungkinkan pengguna menyimpan hadis favorit tanpa memerlukan akun atau autentikasi pihak ketiga.
• Pencarian Live & Filter Nomor Hadis: Menyediakan pencarian teks terjemahan secara langsung dengan debounce, serta filter lompat nomor hadis spesifik (misal mencari Hadits Bukhari No. 1000).

Cuplikan Implementasi Server Endpoint

import { queryHadithsFromDb } from '../../utils/d1-hadiths'

export default defineCachedEventHandler(
  async (event) => {
    const query = getQuery(event)

    return queryHadithsFromDb({
      narrator: query.narrator ? String(query.narrator) : 'bukhari',
      search: query.search ? String(query.search) : undefined,
      page: query.page ? Number(query.page) : 1,
      limit: 15,
      number: query.number ? Number(query.number) : undefined
    })
  },
  {
    getKey: (event) => {
      const q = getQuery(event)
      return `hadiths-${q.narrator || 'bukhari'}-${q.page || 1}-${q.search || ''}-${q.number || ''}`
    },
    maxAge: 60 * 60, // Cache selama 1 jam
    swr: true
  }
)

Fitur Utama

• Koleksi 9 Kitab Lengkap: Mencakup Shahih Bukhari (6.638 hadis), Shahih Muslim (4.930 hadis), Sunan Abu Dawud (4.419 hadis), Jami' at-Tirmidzi (3.625 hadis), Sunan an-Nasa'i (5.364 hadis), Sunan Ibnu Majah (4.285 hadis), Musnad Ahmad (4.305 hadis), Muwatha' Malik (1.587 hadis), dan Sunan ad-Darimi (2.949 hadis).
• Aksi Cepat (Salin & Bagikan): Dukungan Clipboard API untuk menyalin teks Arab beserta artinya, serta Web Share API untuk membagikan hadis ke aplikasi lain.
• Navigasi Sekuensial: Tombol lompat hadis berikutnya dan sebelumnya untuk pengalaman membaca kitab seperti buku fisik.
• Antarmuka Adaptif: Desain responsif penuh untuk desktop dan ponsel cerdas dengan dukungan tema gelap/terang bawaan (Dark/Light Mode).