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

Alat tambahan untuk membantu Anda menyeimbangkan kecepatan dan keaktualan saat menyajikan aplikasi web.

Jeff Posnick

Apa yang dikirim?

stale-while-revalidate membantu developer menyeimbangkan antara kecepatan—memuat konten yang di-cache secara langsung—dan keaktualan—memastikan update pada konten yang di-cache digunakan di masa mendatang. Jika Anda mengelola layanan web atau library pihak ketiga yang diupdate secara rutin, atau aset pihak pertama Anda cenderung memiliki masa aktif yang singkat, stale-while-revalidate dapat menjadi tambahan yang berguna untuk kebijakan caching yang 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 mengabaikan nilai konfigurasi tersebut, dan menggunakan max-age, seperti yang akan saya jelaskan sebentar lagi…

Apa artinya?

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 "usang"? 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 dianggap usang.

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 usang, 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 usang 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. Apa pun itu, 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 cukup lama sehingga 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 langsung

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 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 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 dari ketiga status yang berbeda tersebut, beserta jangka waktu penerapan masing-masing status untuk contoh kita:

Diagram yang mengilustrasikan informasi dari bagian sebelumnya.

Apa saja kasus penggunaan yang umum?

Meskipun contoh di atas untuk layanan API "menit setelah jam" dibuat-buat, contoh ini menggambarkan kasus penggunaan yang diharapkan—layanan yang memberikan informasi yang perlu diperbarui, tetapi tingkat keusangan tertentu dapat diterima.

Contoh yang lebih realistis mungkin adalah API untuk kondisi cuaca saat ini, atau headline berita teratas yang ditulis dalam satu jam terakhir.

Umumnya, setiap respons 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. 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 cara berinteraksi dengan pekerja layanan?

Jika Anda pernah mendengar tentang stale-while-revalidate, kemungkinan besar itu dalam konteks resep yang digunakan dalam service worker.

Penggunaan stale-while-revalidate melalui header Cache-Control memiliki beberapa kesamaan dengan penggunaannya di pekerja layanan, dan banyak pertimbangan yang sama seputar kompromi keaktualan dan masa aktif maksimum yang berlaku. Namun, ada beberapa pertimbangan yang harus Anda perhitungkan 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.
  • Anda memerlukan kontrol yang mendetail atas konten cache, dan ingin menerapkan sesuatu seperti kebijakan masa berlaku yang paling jarang digunakan. Modul Masa Berlaku Cache Workbox dapat membantu mengatasi hal ini.
  • Anda ingin diberi tahu saat respons yang 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 Cache-Control jika…

  • Anda tidak ingin repot-repot men-deploy dan mengelola pekerja layanan untuk aplikasi web Anda.
  • Anda tidak keberatan membiarkan pengelolaan cache otomatis browser mencegah cache lokal Anda bertambah terlalu besar.
  • Anda tidak keberatan dengan pendekatan yang saat ini tidak didukung di semua browser modern (per Juli 2019; dukungan mungkin akan 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 memiliki "kesempatan pertama" untuk merespons permintaan. Jika pekerja layanan memutuskan untuk tidak merespons, atau jika dalam proses menghasilkan respons, pekerja layanan membuat permintaan jaringan menggunakan fetch(), perilaku yang dikonfigurasi melalui header Cache-Control akan berlaku.

Pelajari lebih lanjut