Codelab ini menunjukkan cara mengubah header caching HTTP yang ditampilkan oleh server web berbasis Node.js, yang menjalankan framework penayangan Express. Bagian ini juga akan menunjukkan cara mengonfirmasi bahwa perilaku caching yang Anda harapkan benar-benar diterapkan, menggunakan panel Jaringan di Chrome DevTools.
Memahami contoh project
Berikut adalah file utama yang akan Anda gunakan dalam project contoh:
server.js
berisi kode Node.js yang menayangkan konten aplikasi web. Metode ini menggunakan Express untuk menangani permintaan dan respons HTTP. Secara khusus,express.static()
digunakan untuk menyajikan semua file lokal di direktori publik, sehingga dokumentasiserve-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
danpublic/style.391484cf.css
adalah aset JavaScript dan CSS aplikasi web. Masing-masing file ini berisi hash di URL-nya, yang sesuai dengan kontennya.index.html
bertanggung jawab untuk melacak URL berversi spesifik mana yang akan dimuat.
Mengonfigurasi header penyimpanan dalam cache untuk HTML kami
Saat merespons permintaan untuk URL yang tidak berisi info pembuatan versi, pastikan Anda menambahkan Cache-Control: no-cache
ke pesan respons. Selain
itu, sebaiknya setel salah satu dari dua header respons tambahan: Last-Modified
atau ETag
. index.html
termasuk dalam kategori ini. Anda dapat menguraikannya 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, sehingga dalam penyiapan saat ini, Anda tidak harus memilih ikut serta untuk mendapatkan perilaku tersebut. Tetapi Anda tetap dapat melakukan
konfigurasi secara eksplisit.
Kedua, Anda harus dapat menambahkan header Cache-Control: no-cache
, tetapi hanya untuk dokumen HTML (dalam hal ini index.html
). Cara termudah untuk menetapkan header ini secara bersyarat adalah dengan menulis setHeaders function
kustom, dan di dalamnya, periksa apakah permintaan masuk untuk dokumen HTML.
- Klik Remix untuk Mengedit agar project dapat diedit.
Konfigurasi penayangan statis di server.js
dimulai seperti berikut:
app.use(express.static('public'));
- Lakukan perubahan yang dijelaskan di atas, dan Anda akan mendapatkan sesuatu 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 penyimpanan ke cache untuk URL berversi
Saat merespons permintaan untuk URL yang berisi
"sidik jari" atau
informasi pembuatan versi, dan yang kontennya tidak pernah dimaksudkan untuk diubah, 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 berisi hash. Dalam kasus project contoh ini, selalu terdiri dari delapan
karakter dari rangkaian angka 0–9 dan huruf kecil a–f (yaitu
karakter heksadesimal). Hash
selalu dipisahkan dengan karakter .
di kedua sisi.
Ekspresi reguler yang cocok dengan aturan umum tersebut dapat dinyatakan sebagai new RegExp('\\.[0-9a-f]{8}\\.')
.
- 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
Dengan modifikasi pada server file statis, Anda dapat memeriksa untuk memastikan bahwa header yang tepat telah ditetapkan dengan melihat pratinjau aplikasi aktif saat panel Jaringan DevTools terbuka.
Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Lalu tekan Layar Penuh .
Sesuaikan kolom yang ditampilkan di panel Network untuk menyertakan informasi yang paling relevan, dengan mengklik kanan header kolom:
Di sini, kolom yang harus diperhatikan adalah Name
, Status
, Cache-Control
,
ETag
, dan Last-Modified
.
- Saat DevTools terbuka ke panel Jaringan, muat ulang halaman.
Setelah halaman dimuat, Anda akan melihat entri di panel Network yang terlihat seperti berikut:
Baris pertama adalah untuk dokumen HTML yang Anda buka. Ini ditayangkan
dengan benar dengan 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 pembaruan pada HTML yang sudah ada di cache-nya. Respons HTTP 304 menunjukkan bahwa HTML belum diperbarui.
Dua baris berikutnya adalah untuk aset JavaScript dan CSS berversi. Anda akan
melihatnya ditayangkan dengan Cache-Control: max-age=31536000
, dan status HTTP untuk
setiap variabel tersebut adalah 200
.
Karena konfigurasi yang digunakan, tidak ada permintaan yang sebenarnya yang dibuat ke server Node.js. Anda dapat melihat detail tambahan jika mengklik entri, termasuk respons berasal "(dari cache disk)".
Nilai aktual untuk kolom ETag dan Last-Modified tidak terlalu penting. Yang penting adalah mengonfirmasi bahwa mereka telah siap.
Mengambil kesimpulan
Setelah menyelesaikan langkah-langkah dalam codelab ini, Anda kini telah 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 Chrome DevTools.