Alat tambahan untuk membantu Anda menyeimbangkan keaktualan dan keaktualan saat menayangkan aplikasi web.
Apa yang dikirim?
stale-while-revalidate
membantu
developer menyeimbangkan antara kelangsungan—memuat konten yang di-cache dengan segera—dan
keaktualan—memastikan pembaruan pada konten yang di-cache digunakan di masa mendatang. Jika
Anda mengelola layanan web atau library pihak ketiga yang diperbarui secara rutin, atau aset pihak pertama Anda cenderung memiliki masa aktif yang singkat, maka
stale-while-revalidate
dapat menjadi tambahan yang berguna untuk kebijakan cache
yang ada.
Dukungan untuk menetapkan stale-while-revalidate
bersama max-age
di header respons Cache-Control
tersedia di Chrome 75 dan Firefox 68.
Browser yang tidak mendukung stale-while-revalidate
akan mengabaikan nilai konfigurasi tersebut secara diam-diam, dan menggunakan max-age
, seperti yang akan saya jelaskan sebentar lagi…
Apa artinya?
Mari kita bagi stale-while-revalidate
menjadi dua bagian: ide bahwa respons yang di-cache
mungkin sudah tidak berlaku, dan proses validasi ulang.
Pertama, bagaimana browser mengetahui apakah respons yang di-cache "sudah tidak berlaku"? Header respons
Cache-Control
yang berisi stale-while-revalidate
juga harus berisi
max-age
, dan jumlah detik yang ditentukan melalui max-age
adalah yang menentukan
keusangan. Setiap respons yang di-cache yang lebih baru dari max-age
dianggap baru, dan
respons yang di-cache yang lebih lama sudah tidak berlaku.
Jika respons yang di-cache secara lokal masih baru, respons tersebut dapat digunakan apa adanya untuk
memenuhi permintaan browser. Dari perspektif stale-while-revalidate
,
tidak ada yang perlu dilakukan dalam skenario ini.
Namun, jika respons yang di-cache sudah tidak berlaku, pemeriksaan berbasis usia lainnya akan dilakukan:
apakah usia respons yang di-cache berada dalam periode waktu tambahan yang disediakan oleh
setelan stale-while-revalidate
?
Jika usia respons yang sudah tidak berlaku berada dalam periode ini, respons tersebut akan digunakan untuk
memenuhi permintaan browser. Pada saat yang sama, permintaan "validasi ulang" akan
dibuat terhadap jaringan dengan cara yang tidak menunda penggunaan respons
yang di-cache. Respons yang ditampilkan mungkin berisi informasi yang sama dengan
respons yang di-cache sebelumnya, atau mungkin berbeda. Apa pun yang terjadi, respons jaringan
disimpan secara lokal, menggantikan apa pun yang sebelumnya di-cache, dan
mereset timer "keaktualan" yang digunakan selama perbandingan max-age
di masa mendatang.
Namun, jika respons yang di-cache sudah tidak berlaku dan berada di luar
periode waktu stale-while-revalidate
, respons tersebut tidak akan memenuhi permintaan browser. Sebagai gantinya, browser akan mengambil respons dari jaringan, dan menggunakannya
untuk memenuhi permintaan awal dan juga mengisi cache lokal
dengan respons baru.
Contoh Live
Berikut adalah contoh sederhana HTTP API untuk menampilkan waktu saat ini—lebih khususnya, jumlah menit saat ini setelah jam.
Dalam skenario ini, server web menggunakan header Cache-Control
ini dalam respons HTTP-nya:
Cache-Control: max-age=1, stale-while-revalidate=59
Setelan ini berarti bahwa, jika permintaan waktu diulang dalam 1 detik berikutnya, nilai yang di-cache sebelumnya akan tetap baru, dan digunakan apa adanya, tanpa validasi ulang.
Jika permintaan diulang antara 1 dan 60 detik kemudian, nilai yang di-cache akan menjadi usang, tetapi akan digunakan untuk memenuhi permintaan API. Pada saat yang sama, "di latar belakang", permintaan validasi ulang akan dibuat untuk mengisi cache dengan nilai baru untuk penggunaan di masa mendatang.
Jika permintaan diulang setelah lebih dari 60 detik, respons yang sudah tidak berlaku tidak akan digunakan sama sekali, dan pemenuhan permintaan browser serta validasi ulang cache akan bergantung pada respons yang diterima kembali dari jaringan.
Berikut adalah perincian ketiga status yang berbeda tersebut, beserta jangka waktu saat masing-masing status berlaku untuk contoh kita:
Apa saja kasus penggunaan yang umum?
Meskipun contoh di atas untuk layanan API "menit setelah jam" dibuat-buat, contoh ini mengilustrasikan kasus penggunaan yang diharapkan—layanan yang memberikan informasi yang perlu diperbarui, tetapi dengan tingkat keusangan yang dapat diterima.
Contoh yang tidak terlalu dibuat-buat mungkin adalah API untuk kondisi cuaca saat ini, atau judul berita utama yang ditulis dalam satu jam terakhir.
Umumnya, respons apa pun yang diperbarui pada interval yang diketahui, kemungkinan akan diminta beberapa kali, dan bersifat statis dalam interval tersebut adalah kandidat yang baik untuk penyimpanan dalam cache jangka pendek melalui max-age
. Selain max-age
, penggunaan stale-while-revalidate
meningkatkan kemungkinan permintaan mendatang dapat dipenuhi dari cache dengan konten yang lebih baru, tanpa memblokir respons jaringan.
Bagaimana cara berinteraksi dengan pekerja layanan?
Jika Anda pernah mendengar stale-while-revalidate
, kemungkinan besar dalam
konteks
resep
yang digunakan dalam pekerja layanan.
Menggunakan stale-while-revalidate melalui header Cache-Control
memiliki beberapa
kesamaan dengan penggunaannya di pekerja layanan, dan banyak pertimbangan
yang sama terkait kompromi keaktualan dan masa aktif maksimum berlaku. Namun,
ada beberapa pertimbangan yang harus Anda pertimbangkan saat memutuskan
apakah akan menerapkan pendekatan berbasis pekerja layanan, atau hanya mengandalkan
konfigurasi header Cache-Control
.
Gunakan pendekatan pekerja layanan jika…
- Anda sudah menggunakan pekerja layanan di aplikasi web.
- Anda memerlukan kontrol terperinci atas konten cache, dan ingin menerapkan sesuatu seperti kebijakan masa berlaku yang paling lama digunakan. Modul Cache Expiration Workbox dapat membantu hal ini.
- Anda ingin diberi tahu saat respons yang sudah tidak berlaku berubah di latar belakang selama langkah validasi ulang. Modul Update Cache Siaran Workbox dapat membantu hal ini.
- Anda memerlukan perilaku
stale-while-revalidate
ini di semua browser modern.
Gunakan pendekatan Cache-Control jika…
- Anda lebih memilih untuk tidak menangani overhead deployment dan pemeliharaan pekerja layanan untuk aplikasi web Anda.
- Anda tidak keberatan jika pengelolaan cache otomatis browser mencegah cache lokal Anda menjadi terlalu besar.
- Anda tidak keberatan dengan pendekatan yang saat ini tidak didukung di semua browser modern (per Juli 2019; dukungan dapat bertambah di masa mendatang).
Jika Anda menggunakan pekerja layanan dan juga mengaktifkan stale-while-revalidate
untuk beberapa respons melalui header Cache-Control
, pekerja layanan akan,
secara umum, memiliki "kesempatan pertama" untuk merespons permintaan. Jika pekerja layanan
memutuskan untuk tidak merespons, atau jika dalam proses membuat respons, pekerja layanan membuat
permintaan jaringan menggunakan fetch()
,
perilaku yang dikonfigurasi melalui header Cache-Control
akan akhirnya
berlaku.
Pelajari lebih lanjut
- Respons
stale-while-revalidate
dalam spesifikasi Fetch API. - RFC 5861, yang mencakup spesifikasi
stale-while-revalidate
awal. - Cache HTTP: garis pertahanan pertama Anda, dari panduan "Keandalan jaringan" di situs ini.
Banner besar oleh Samuel Zeller.