Sudah Diperbaiki tetapi Layarnya Tidak Berubah — Cara Kerja Cache

Artikel ini membahas situasi ketika sudah diperbaiki tetapi layarnya tidak berubah.

Ceritanya tentang saat kamu sudah memperbaiki kode lalu men-deploy-nya, tetapi begitu dibuka tampilannya masih yang lama.

Penyebabnya biasanya bukan kodenya, melainkan salinan lama yang masih tersimpan di suatu tempat.

Dari apakah hanya kamu yang melihat versi lama atau semua orang, kamu bisa membedakan di mana salinannya tersimpan.

Apa itu cache — mengembalikan salinan yang disimpan tanpa mengambilnya lagi

Cache (mekanisme yang menyimpan sesuatu yang sudah pernah diambil di tempat yang dekat, lalu mengembalikannya tanpa mengambil ulang) ada supaya hal yang sama tidak diambil berkali-kali.

Sesuatu yang sudah sekali diambil disimpan secara lokal, dan mulai pengambilan kedua yang dipakai adalah salinan itu.

Sebagai imbalan atas kecepatan, muncul rentang waktu ketika pembaruan tidak disadari.

Lamanya penyimpanan itu adalah masa berlaku (max-age; waktu ketika salinan yang disimpan boleh dipakai tanpa mengambil ulang).

Sampai masa berlakunya habis, salinan lokal terus dipakai meski servernya sudah kamu perbaiki.

Makin jarang sesuatu berubah, seperti gambar dan CSS, makin panjang pengaturannya.

Ada rentang waktu ketika perbaikan tidak muncul karena masa berlakunya belum habis.

Cache mengembalikan salinan lama

Cache adalah mekanisme yang menyimpan sesuatu yang sudah pernah diambil di tempat yang dekat, lalu mengembalikannya mulai pengambilan berikutnya.

Karena tidak mengambil setiap kali, prosesnya jadi cepat, tetapi pembaruan di sisi server pada sela waktu itu tidak disadari, sehingga muncul keadaan sudah diperbaiki tetapi tidak berubah.

Tiga tempat salinan disimpan — di dalam browser kamu, di tengah distribusi, dan di dalam server

Tempat salinan disimpan bukan cuma satu.

Ada 3 tempat berurutan dari yang paling dekat dengan pengguna, dan ketiganya bersarang.

Yang paling dalam, yaitu salinan yang dipegang browser kamu sendiri, adalah cache browser (browser cache).

Yang kedua, CDN (Content Delivery Network; mekanisme yang menaruh salinan di tempat dekat pengguna lalu mendistribusikannya dari sana), sudah tertanam sejak awal di banyak tujuan deploy.

Ketiga tempat ini berbeda cara menghapusnya dan berbeda pula seberapa luas jangkauan efeknya.

Tindakan meminta salinan CDN dihapus disebut purge (menghapus salinan yang dipegang jalur distribusi supaya diambil ulang).

Ada juga pengaturan yang melakukan purge otomatis setiap kali deploy.

Apa itu memuat ulang secara paksa

Pada pemuatan ulang biasa, salinan lokal kadang dipakai apa adanya.

Tindakan yang memaksa pengambilan ulang disebut hard reload (pemuatan ulang paksa), dan kalau kamu hanya ingin memastikan, membuka halamannya di window yang tidak menyimpan riwayat memberi hasil yang sama.

Pilah berdasarkan apakah hanya kamu yang melihat versi lama atau semua orang

Daripada mencoba 3 tempat itu berurutan dari atas, memastikan jangkauannya lebih dulu akan lebih cepat selesai.

Yang kamu lihat adalah apakah orang selain kamu juga melihat versi lama.

Kalau hanya kamu, penyebabnya tidak ada di tempat lain selain di dalam browser kamu sendiri.

Kalau orang lain juga melihat versi lama, sebanyak apa pun kamu memuat ulang di sisimu tidak akan mengubahnya.

Yang paling bawah adalah kasus ketika file barunya memang belum sampai ke server publik.

Kalau build-nya gagal, yang dipublikasikan masih hasil build sebelumnya.

Berubah setelah dimuat ulang belum tentu berarti selesai

Kalau kamu memuat ulang di sisimu sendiri, tampilannya jadi baru, tetapi itu hanya menukar salinan pada 1 mesin milikmu.

Di perangkat pengguna, salinan lama tetap ada sampai masa berlakunya habis.

Kalau nama file diubah, salinan lama tidak lagi dipakai

Alih-alih menghapusi satu per satu, ada cara supaya salinan lama tidak terpakai sejak awal.

Caranya adalah mengubah nama file bersamaan dengan isinya.

Kalau sebagian nama file diganti dengan karakter yang dihitung dari isinya, namanya ikut berubah setiap kali isinya berubah.

Kalau namanya berbeda, salinan lokal adalah file lain sehingga tidak dipakai.

Pekerjaan memberi nama ini dilakukan otomatis saat build.

Kamu tidak perlu memikirkan namanya sendiri.

Hanya index.html sebagai pintu masuk yang namanya tidak bisa diubah, jadi masa berlakunya dibuat pendek.

Begitu nama file yang dimuat di dalamnya sudah baru, mulai dari situ versi barunya sampai secara otomatis.

Begitu ditemukan di titik yang lebih awal, pengambilannya tidak diteruskan lebih jauh.

Karena itu, kalau salinan lama masih tersimpan walau di 1 tempat saja, versi barunya tidak sampai.

Mengubah nama lebih pasti daripada menghapusi satu per satu

Kalau nama file ikut berubah saat isinya berubah, salinan lokal adalah file lain sehingga tidak dipakai.

Penamaan ini dilakukan build secara otomatis, jadi kamu cukup memendekkan masa berlaku untuk file pintu masuk yang namanya tidak bisa diubah.