Menjaga segala sesuatunya tetap segar dengan yang sudah tidak berlaku saat validasi ulang

Alat tambahan untuk membantu Anda menyeimbangkan kesegeraan dan keaktualan saat menayangkan aplikasi web.

Jeff Posnick

Apa yang dikirim?

stale-while-revalidate membantu developer menyeimbangkan antara segera—memuat konten yang di-cache—dan keaktualan—memastikan update pada konten yang di-cache digunakan di masa mendatang. Jika Anda mengelola layanan web atau library pihak ketiga yang diperbarui sesuai jadwal rutin, atau aset pihak pertama cenderung memiliki masa berlaku yang singkat, stale-while-revalidate dapat menjadi tambahan yang berguna untuk kebijakan penyimpanan cache yang sudah ada.

Dukungan untuk menyetel 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 otomatis mengabaikan nilai konfigurasi tersebut, dan menggunakan max-age, seperti yang akan segera saya jelaskan...

Apa maksudnya?

Mari kita uraikan stale-while-revalidate menjadi dua bagian: gagasan 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 dalam jangka waktu tambahan yang disediakan oleh setelan stale-while-revalidate?

Jika usia respons tidak berlaku termasuk 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. Bagaimanapun, respons jaringan disimpan secara lokal, menggantikan apa pun yang sebelumnya di-cache, dan menyetel ulang timer "keaktualan" yang digunakan selama perbandingan max-age di masa mendatang.

Namun, jika respons yang di-cache dan tidak berlaku sudah cukup lama sehingga berada di luar jangka 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 serta mengisi cache lokal dengan respons baru.

Contoh Live

Berikut adalah contoh sederhana HTTP API untuk menampilkan waktu saat ini—khususnya, jumlah saat ini dari menit setelah satu 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 untuk waktu diulang dalam 1 detik berikutnya, nilai yang sebelumnya di-cache akan tetap baru, dan digunakan sebagaimana adanya, tanpa validasi ulang.

Jika permintaan diulang antara 1 sampai 60 detik kemudian, nilai yang disimpan dalam cache akan menjadi tidak berlaku, 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 pada masa mendatang.

Jika permintaan diulang setelah lebih dari 60 detik, respons lama tidak akan digunakan sama sekali, dan pemenuhan permintaan browser serta validasi ulang cache akan bergantung pada respons kembali dari jaringan.

Berikut adalah perincian dari ketiga status yang berbeda tersebut, beserta periode waktu saat masing-masing status tersebut berlaku untuk contoh kami:

Diagram yang menggambarkan informasi dari bagian sebelumnya.

Apa kasus penggunaan yang umum?

Meskipun contoh di atas untuk layanan API "menit setelah jam" dibuat, contoh tersebut menggambarkan kasus penggunaan yang diharapkan—layanan yang memberikan informasi yang perlu diperbarui, tetapi jika beberapa tingkat penghentian dapat diterima.

Contoh yang tidak rumit dapat berupa 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 cache jangka pendek melalui max-age. Menggunakan stale-while-revalidate selain max-age akan meningkatkan kemungkinan bahwa permintaan mendatang dapat dipenuhi dari cache dengan konten yang lebih baru, tanpa memblokir respons jaringan.

Bagaimana ia berinteraksi dengan pekerja layanan?

Jika Anda pernah mendengar tentang stale-while-revalidate, kemungkinan besar file tersebut berada dalam konteks resep yang digunakan dalam pekerja layanan.

Menggunakan "basi-saat-validasi ulang" melalui header Cache-Control memiliki beberapa kesamaan dengan penggunaannya dalam pekerja layanan, dan banyak pertimbangan yang sama seputar trade-off keaktualan dan masa aktif maksimum berlaku. Namun, ada beberapa pertimbangan yang harus Anda pertimbangkan saat memutuskan apakah akan mengimplementasikan 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 mengimplementasikan sesuatu seperti kebijakan akhir masa berlaku yang paling lama tidak digunakan. Modul Masa Berlaku Cache Workbox dapat membantu mengatasi hal ini.
  • Anda ingin diberi tahu saat respons yang sudah tidak berlaku berubah di latar belakang selama langkah validasi ulang. Modul Broadcast Cache Update Workbox dapat membantu mengatasi hal ini.
  • Anda memerlukan perilaku stale-while-revalidate ini di semua browser modern.

Gunakan pendekatan Kontrol Cache jika...

  • Anda tidak ingin berurusan dengan overhead deployment dan pemeliharaan pekerja layanan untuk aplikasi web Anda.
  • Anda tidak masalah dengan membiarkan pengelolaan cache otomatis browser mencegah cache lokal Anda bertambah terlalu besar.
  • Anda tidak masalah dengan pendekatan yang saat ini belum didukung di semua browser modern (mulai 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 secara umum akan melakukan "crack pertama" saat merespons permintaan. Jika pekerja layanan memutuskan untuk tidak merespons, atau jika selama proses menghasilkan respons, pekerja layanan membuat permintaan jaringan menggunakan fetch(), perilaku yang dikonfigurasi melalui header Cache-Control akan berlaku.

Pelajari lebih lanjut

Banner besar oleh Samuel Zeller.