Mengonfigurasi perilaku caching HTTP

Jeff Posnick

Catatan: Codelab ini menggunakan Chrome DevTools. Download Chrome jika Anda belum memilikinya.

Codelab ini menunjukkan cara mengubah header caching HTTP yang ditampilkan oleh server web berbasis Node.js, yang menjalankan framework penyaluran Express. Kursus ini juga akan menunjukkan cara mengonfirmasi bahwa perilaku caching yang Anda harapkan benar-benar diterapkan, menggunakan panel Jaringan di DevTools Chrome.

Catatan: Meskipun petunjuk spesifiknya disesuaikan untuk Express, prinsip umum tentang memilih header caching yang benar berlaku untuk lingkungan server web apa pun.

Memahami project contoh

Berikut adalah file utama yang akan Anda gunakan dalam project contoh:

• server.js berisi kode Node.js yang menyajikan konten aplikasi web. Layanan ini menggunakan Express untuk menangani permintaan dan respons HTTP. Secara khusus, express.static() digunakan untuk menyajikan semua file lokal di direktori publik, sehingga dokumentasi serve-static akan berguna.
• public/index.html adalah HTML aplikasi web. Seperti kebanyakan file HTML, file ini tidak berisi informasi pembuatan versi sebagai bagian dari URL-nya.
• public/app.15261a07.js dan public/style.391484cf.css adalah aset JavaScript dan CSS aplikasi web. Setiap file ini berisi hash di URL-nya, yang sesuai dengan kontennya. index.html bertanggung jawab untuk melacak URL berversi spesifik yang akan dimuat.

Catatan: Di "dunia nyata", proses penetapan hash dan pembaruan file HTML untuk menyertakan referensi ke URL berversi terbaru akan ditangani oleh alat build, seperti webpack. Untuk tujuan codelab ini, asumsikan bahwa hash dibuat sebagai bagian dari proses build yang telah berlangsung.

Mengonfigurasi header caching untuk HTML kita

Saat merespons permintaan untuk URL yang tidak berisi info pembuatan versi, pastikan Anda menambahkan Cache-Control: no-cache ke pesan respons. Selain itu, sebaiknya tetapkan salah satu dari dua header respons tambahan: Last-Modified atau ETag. index.html termasuk dalam kategori ini. Anda dapat membaginya menjadi dua langkah.

Pertama, header Last-Modified dan ETag dikontrol oleh opsi konfigurasi etag dan lastModified. Kedua opsi ini sebenarnya ditetapkan secara default ke true untuk semua respons HTTP, jadi dalam penyiapan saat ini, Anda tidak harus memilih ikut serta untuk mendapatkan perilaku tersebut. Namun, Anda tetap dapat menentukan nilai ini secara eksplisit dalam konfigurasi.

Kedua, Anda harus dapat menambahkan header Cache-Control: no-cache, tetapi hanya untuk dokumen HTML (index.html, dalam hal ini). Cara termudah untuk menetapkan header ini secara bersyarat adalah dengan menulis setHeaders function kustom, dan di dalamnya, periksa apakah permintaan yang masuk ditujukan untuk dokumen HTML.

Konfigurasi penyajian statis di server.js dimulai seperti ini:

app.use(express.static('public'));

• Lakukan perubahan yang dijelaskan di atas, dan Anda akan mendapatkan hasil yang terlihat seperti:

app.use(express.static('public', {
  etag: true, // Just being explicit about the default.
  lastModified: true,  // Just being explicit about the default.
  setHeaders: (res, path) => {
    if (path.endsWith('.html')) {
      // All of the project's HTML files end in .html
      res.setHeader('Cache-Control', 'no-cache');
    }
  },
}));

Mengonfigurasi header caching untuk URL berversi

Saat merespons permintaan untuk URL yang berisi informasi "sidik jari" atau pembuatan versi, dan yang kontennya tidak pernah dimaksudkan untuk berubah, tambahkan Cache-Control: max-age=31536000 ke respons Anda. app.15261a07.js dan style.391484cf.css termasuk dalam kategori ini.

Berdasarkan setHeaders function yang digunakan pada langkah terakhir, Anda dapat menambahkan logika tambahan untuk memeriksa apakah permintaan tertentu ditujukan untuk URL berversi, dan jika ya, tambahkan header Cache-Control: max-age=31536000.

Cara paling efektif untuk melakukannya adalah dengan menggunakan ekspresi reguler untuk melihat apakah aset yang diminta cocok dengan pola tertentu yang Anda ketahui hash-nya. Dalam kasus project contoh ini, ID selalu terdiri dari delapan karakter dari kumpulan digit 0–9 dan huruf kecil a–f (yaitu karakter heksadesimal). Hash selalu dipisahkan oleh karakter . di kedua sisinya.

Ekspresi reguler yang cocok dengan aturan umum tersebut dapat dinyatakan sebagai new RegExp('\\.[0-9a-f]{8}\\.').

Catatan: Sebaiknya buat aturan yang sespesifik mungkin untuk melindungi dari masalah di masa mendatang. Pencocokan yang lebih umum, seperti memeriksa ekstensi file .js atau .css, dapat menjadi masalah di kemudian hari jika Anda akhirnya menambahkan aset JavaScript atau CSS tambahan yang tidak diberi versi ke project Anda.

• Ubah fungsi setHeaders agar terlihat seperti ini:

app.use(express.static('public', {
  etag: true, // Just being explicit about the default.
  lastModified: true,  // Just being explicit about the default.
  setHeaders: (res, path) => {
    const hashRegExp = new RegExp('\\.[0-9a-f]{8}\\.');

    if (path.endsWith('.html')) {
      // All of the project's HTML files end in .html
      res.setHeader('Cache-Control', 'no-cache');
    } else if (hashRegExp.test(path)) {
      // If the RegExp matched, then we have a versioned URL.
      res.setHeader('Cache-Control', 'max-age=31536000');
    }
  },
}));

Mengonfirmasi perilaku baru menggunakan DevTools

Catatan: Anda dapat mempelajari panel Jaringan di DevTools Chrome dengan menyelesaikan codelab ini.

Setelah mengubah server file statis, Anda dapat memeriksa untuk memastikan bahwa header yang tepat telah ditetapkan dengan melihat pratinjau aplikasi aktif saat panel Jaringan DevTools terbuka.

• Sesuaikan kolom yang ditampilkan di panel Jaringan untuk menyertakan informasi yang paling relevan, dengan mengklik kanan header kolom:

Di sini, kolom yang perlu diperhatikan adalah Name, Status, Cache-Control, ETag, dan Last-Modified.

• Dengan DevTools terbuka di panel Jaringan, muat ulang halaman.

Setelah halaman dimuat, Anda akan melihat entri di panel Jaringan yang terlihat seperti berikut:

Baris pertama adalah untuk dokumen HTML yang Anda buka. Hal ini disajikan dengan benar menggunakan Cache-Control: no-cache. Status respons HTTP untuk permintaan tersebut adalah 304. Artinya, browser tahu untuk tidak langsung menggunakan HTML yang di-cache, tetapi membuat permintaan HTTP ke server web, menggunakan informasi Last-Modified dan ETag untuk melihat apakah ada update pada HTML yang sudah ada di cache-nya. Respons HTTP 304 menunjukkan bahwa tidak ada HTML yang diperbarui.

Catatan: Cache-Control: no-cache tidak berarti "tidak pernah menggunakan salinan yang di-cache". Artinya, "selalu periksa dengan server terlebih dahulu, dan gunakan salinan yang di-cache jika ada respons HTTP 304".

Dua baris berikutnya adalah untuk aset JavaScript dan CSS berversi. Anda akan melihatnya ditayangkan dengan Cache-Control: max-age=31536000, dan status HTTP untuk masing-masing adalah 200. Karena konfigurasi yang digunakan, tidak ada permintaan aktual yang dibuat ke server Node.js, dan mengklik entri akan menampilkan detail tambahan, termasuk bahwa respons berasal "(dari cache disk)".

Nilai sebenarnya untuk kolom ETag dan Last-Modified tidak terlalu penting. Hal yang penting adalah mengonfirmasi bahwa cookie tersebut ditetapkan.

Mengambil kesimpulan

Setelah mengikuti langkah-langkah dalam codelab ini, Anda kini memahami cara mengonfigurasi header respons HTTP di server web berbasis Node.js menggunakan Express, untuk penggunaan cache HTTP yang optimal. Anda juga memiliki langkah-langkah yang diperlukan untuk mengonfirmasi bahwa perilaku caching yang diharapkan sedang digunakan, melalui panel Jaringan di DevTools Chrome.