Hadith - Kutubut Tis'ah Encyclopedia

Large Dataset Constraints on Edge Networks

Serving a complete digital collection of the 9 canonical hadith books (Kutubut Tis'ah) comprising 38,102 hadiths (~70 MB text data) in a modern web application presents distinct technical challenges:

1. Fetching raw JSON files directly in the browser incurs heavy initial downloads, degrading page speed on slower connections.
2. Serverless edge platforms like Cloudflare Workers enforce a 3 MB compressed script limit and a 50ms CPU execution cap, ruling out parsing massive JSON datasets repeatedly in memory at runtime.

The Hadith application resolves these constraints by migrating the entire collection into Cloudflare D1—a distributed SQLite edge database managed via NuxtHub and Drizzle ORM—paired with Nitro's stale-while-revalidate (SWR) caching mechanism.

Architecture & Technical Highlights

Built with Nuxt 4 and Nuxt UI v4, the system focuses on speed, readability, and offline accessibility:

• Cloudflare D1 & Drizzle ORM: All 38,102 hadiths are indexed by (narrator) and composite (narrator, number) keys. Pagination and hadith lookups execute directly at the nearest Cloudflare edge node with under 10ms query latency.
• Compact Payloads & SWR Caching: Each request delivers only 15 hadiths per page (~10–15 KB payload). Responses are cached at the Nitro layer (maxAge: 3600, swr: true), making pagination and repeat visits load in 0ms.
• Arabic Typography & Scaling: Styled using the Amiri font with full diacritical vowel marks (harakat), accompanied by interactive font-scaling controls and distinct translation blocks.
• Reactive Local Bookmarking: Uses browser localStorage wrapped in Vue composables to let readers save favorite hadiths without requiring external accounts or authentication services.
• Debounced Search & Number Jump: Provides live full-text search across Indonesian translations alongside instant number navigation (e.g., jumping directly to Bukhari Hadith #1000).

Server Implementation

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, // 1 hour SWR cache
    swr: true
  }
)

Key Features

• 9 Canonical Books: Full collections from Sahih Bukhari (6,638 hadiths), Sahih Muslim (4,930 hadiths), Sunan Abu Dawud (4,419 hadiths), Jami' at-Tirmidhi (3,625 hadiths), Sunan an-Nasa'i (5,364 hadiths), Sunan Ibn Majah (4,285 hadiths), Musnad Ahmad (4,305 hadiths), Muwatta Malik (1,587 hadiths), and Sunan ad-Darimi (2,949 hadiths).
• Copy & Share Utilities: Native clipboard support for exporting Arabic text with translations, plus Web Share API integration for sharing directly to external applications.
• Sequential Navigation: Next/previous buttons on detail views to browse hadiths sequentially like a physical book.
• Adaptive Interface: Responsive design optimized for mobile and desktop screens, including native dark and light color modes.