Apa itu Cache? Mengapa Website Kadang Tidak Berubah Setelah Diupdate?

Musuh Tersembunyi Developer Frontend

Skenario ini pasti pernah atau akan kamu alami: Kamu mengedit file style.css, mengubah warna *background* dari merah menjadi biru, menyimpan filenya, lalu me-refresh browser. Tapi ajaibnya, warnanya tetap merah! Kamu sampai meragukan kewarasanmu sendiri. Jangan panik, kodemu tidak rusak, itu adalah ulah Cache.

Apa Itu Cache Browser?

Cache (dibaca: Kesh) adalah memori penyimpanan rahasia di dalam browsermu. Browser modern sangatlah cerdas (dan kadang terlalu rajin). Jika kamu membuka website tokoku.com, browser akan mendownload semua logo, file CSS, dan file JS-nya.

Agar besok ketika kamu membuka web itu lagi proses loadingnya bisa kilat, browser menyimpan fotokopi (Cache) file-file tersebut di *hard disk* laptopmu. Jadi, ketika kamu me-refresh halaman, browser tidak mendownload CSS baru dari server, melainkan memakai CSS lawas dari memori fotokopiannya.

Cara Mengatasi File Nyangkut (Hard Reload)

Sebagai developer, kamu harus memaksa browser untuk "membuang" fotokopian lawas tersebut dan mendownload ulang file yang baru secara utuh. Caranya bukan dengan tombol F5 biasa.

• Di Windows/Linux: Tekan Ctrl + F5 atau Ctrl + Shift + R.
• Di Mac: Tekan Cmd + Shift + R.

Ini disebut Hard Reload atau Force Refresh. Biasanya, setelah menekan tombol ajaib ini, barulah warna birumu akan muncul di layar!

Trik Mematikan Cache Selama Proses Coding

Kalau kamu lelah harus menekan tombol kombinasi panjang setiap saat, ada trik khusus bagi developer. Buka Inspect Element (Developer Tools), pergi ke tab Network, lalu centang kotak kecil bertuliskan Disable cache.

Selama jendela Inspect Element itu terbuka, browser berjanji tidak akan menyimpan fotokopi apapun. Setiap kali kamu refresh, browser akan mengambil data paling mentah dan terbaru langsung dari file kodemu.