Digital Transformation
Prefetching (Pramuat)
TL;DR: Prefetching adalah teknik memuat aset atau halaman berikutnya lebih awal di latar belakang sebelum pengguna benar-benar mengkliknya. Tujuannya membuat navigasi terasa instan. Next.js melakukan prefetch otomatis untuk link yang terlihat di layar.
Apa itu Prefetching?
Prefetching adalah strategi performa di mana browser mengunduh sumber daya yang kemungkinan besar dibutuhkan pengguna selanjutnya, sebelum kebutuhan itu muncul. Saat pengguna akhirnya mengklik link, datanya sudah tersedia di cache, sehingga halaman tampil hampir seketika. Teknik ini bekerja erat dengan optimasi Time to Interactive.
Analoginya seperti pelayan restoran yang menyiapkan menu favorit Anda saat melihat Anda mendekati pintu, jadi pesanan datang lebih cepat.
Jenis dan Cara Kerja
| Mekanisme | Fungsi |
|---|---|
| Link prefetch | Mengunduh halaman tujuan saat link terlihat di viewport |
| DNS prefetch | Meresolusi domain eksternal lebih awal |
| Preconnect | Membuka koneksi ke origin pihak ketiga di awal |
| Speculation Rules | API browser baru untuk prefetch/prerender berbasis aturan |
API modern seperti Speculation Rules memberi kontrol lebih halus dibanding prefetch klasik. Kurangi juga aset yang menghambat dengan menangani render-blocking resource.
Kenapa Penting?
Navigasi yang terasa instan menurunkan rasa frustrasi dan menjaga pengguna tetap menjelajah. Dalam praktik membangun website bisnis dengan Next.js, prefetch bawaan membuat perpindahan antarhalaman nyaris tanpa jeda, yang baik untuk engagement. Hati-hati pada koneksi seluler terbatas, karena prefetch berlebihan bisa memboroskan kuota. Dokumentasi resmi tersedia di web.dev tentang prefetching.
Pertanyaan Umum
Apakah prefetching memboroskan bandwidth?
Bisa, jika diterapkan tanpa pertimbangan. Browser modern dan framework seperti Next.js membatasi prefetch hanya untuk link yang relevan dan terlihat, sehingga risikonya kecil.
Apa beda prefetch dan prerender?
Prefetch mengunduh sumber daya tanpa merendernya. Prerender melangkah lebih jauh dengan menyiapkan halaman secara penuh di latar belakang.
Istilah Terkait