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

server/api/hadiths/index.get.tsts

Copy

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.