Membuat Pencarian Artikel Astro Tanpa Database dengan Pagefind

Membuat Pencarian Artikel Astro Tanpa Database dengan Pagefind

Search sering dianggap fitur yang membutuhkan backend dan database. Untuk blog dengan konten statis, anggapan itu tidak selalu benar. Ada pendekatan yang lebih ringan: siapkan indeks pencarian saat build, lalu biarkan browser menggunakannya.

Pagefind dirancang untuk kebutuhan seperti ini. Ia membaca hasil website yang sudah dibangun dan menghasilkan berkas indeks yang dapat disajikan bersama aset statis lainnya.

Bagaimana cara kerjanya?

Urutannya cukup mudah dipahami. Pertama, Astro menghasilkan HTML. Kedua, Pagefind memindai halaman yang sesuai dan membuat indeks. Ketiga, pengunjung memakai antarmuka pencarian untuk mencari istilah yang ada di indeks tersebut.

Tidak ada query ke database pribadi pada setiap pencarian. Namun browser tetap mengunduh data indeks seperlunya, sehingga ukuran dan cara pembagian indeks tetap memengaruhi pengalaman pengguna.

Memasang dan menjalankan Pagefind

Tambahkan Pagefind sebagai development dependency:

npm install -D pagefind

Setelah Astro selesai dibangun, jalankan:

npx pagefind --site dist

Untuk memudahkan workflow, perintah build bisa menjadi:

"build": "astro build && pagefind --site dist"

Dengan begitu, indeks selalu diperbarui setelah artikel Markdown berubah dan website dibangun ulang.

Jangan indeks seluruh halaman tanpa berpikir

Pengunjung yang mencari topik teknis biasanya ingin menemukan isi artikel, bukan label navigasi yang berulang pada semua halaman. Pagefind menyediakan cara menentukan area konten yang ingin diindeks.

Sebagai contoh, tandai elemen article utama dengan atribut data-pagefind-body. Setelah itu, buat halaman pencarian yang menampilkan input dan hasilnya.

Pastikan artikel berstatus draft tidak terbit pada build produksi. Kalau halaman draft terbangun dan bisa diakses, menghilangkannya dari pencarian saja tidak cukup untuk melindungi konten.

Search dan SEO punya tugas berbeda

Halaman hasil pencarian internal sebaiknya tidak menjadi target indeks mesin pencari. Gunakan noindex pada halaman pencarian, tetapi biarkan halaman artikel dan arsip tetap dapat di-crawl melalui tautan HTML.

Jika hasil pencarian kosong, berikan pesan yang jelas. Jangan membuat pengguna mengira prosesnya masih berjalan. Sediakan juga akses ke arsip artikel jika JavaScript tidak tersedia.

Kapan Pagefind mulai terasa terbatas?

Jika konten menjadi sangat besar, sering berubah tanpa rebuild, atau membutuhkan personalisasi pencarian, mungkin sudah waktunya mempertimbangkan backend pencarian khusus. Namun untuk blog pribadi berisi puluhan hingga ribuan artikel, pendekatan statis layak dicoba terlebih dahulu.

Search yang bagus tidak harus rumit. Ia cukup membantu pengunjung menemukan tulisan yang mereka butuhkan secepat mungkin.