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

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

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:

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 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

Banner besar oleh Samuel Zeller.