Speculation Rules API

TL;DR: Speculation Rules API adalah cara modern memberi tahu browser halaman mana yang kemungkinan besar dikunjungi pengguna berikutnya, lalu browser melakukan prefetch atau prerender di latar belakang. Hasilnya navigasi antarhalaman terasa hampir instan tanpa menunggu jaringan saat diklik.

Apa itu Speculation Rules API?

Speculation Rules API adalah standar web yang menggantikan pendekatan lama seperti tag prefetch manual. Lewat satu blok JSON di halaman, situs bisa mendeklarasikan aturan: misalnya "muat awal semua tautan ke halaman produk saat kursor mendekat". Browser kemudian menebak (speculate) tujuan pengguna dan menyiapkannya lebih dulu. Konsepnya merupakan evolusi dari prefetch dengan kontrol yang jauh lebih halus.

Cara Kerja

Aturan ditulis dalam tag script bertipe speculationrules. Pengembang bisa memakai mode eager, moderate, atau conservative untuk mengatur seberapa agresif browser menebak. Pendekatan ini melengkapi strategi Server-Side Rendering pada framework modern.

Kenapa Penting?

Saat membangun situs portofolio dan halaman layanan dengan Next.js, salah satu cara membuat perpindahan halaman terasa mulus adalah menyiapkan halaman tujuan sebelum diklik. Dengan Speculation Rules, navigasi dari beranda ke halaman detail bisa terasa instan, yang berdampak baik pada metrik pengalaman pengguna seperti Interaction to Next Paint. Untuk audiens Indonesia di jaringan yang bervariasi, ini mengurangi kesan situs lambat. Referensi resmi tersedia di Chrome Developers tentang Speculation Rules.

Pertanyaan Umum

Apakah prerender memboroskan kuota pengguna?

Bisa, jika dipakai agresif. Karena itu mode moderate atau conservative lebih aman untuk pengguna seluler, dan prerender sebaiknya hanya untuk halaman dengan probabilitas kunjungan tinggi.

Apakah ini menggantikan prefetch bawaan framework?

Tidak selalu. Banyak framework punya prefetch sendiri. Speculation Rules memberi lapisan kontrol tambahan di level browser yang bisa dikombinasikan.