HTTP önbelleğe alma davranışını yapılandırma

Jeff Posnick

Bu codelab'i takip etmek için ikinci bir sekmede bu Glitch'i açın.

Not: Bu kod laboratuvarında Chrome Geliştirici Araçları kullanılır. Henüz yapmadıysanız Chrome'u indirin.

Bu codelab'de, Express sunma çerçevesini çalıştıran Node.js tabanlı bir web sunucusunun döndürdüğü HTTP önbelleğe alma başlıklarının nasıl değiştirileceği gösterilmektedir. Ayrıca, Chrome'un Geliştirici Araçları'ndaki Ağ panelini kullanarak beklediğiniz önbelleğe alma davranışının gerçekten uygulandığını nasıl onaylayacağınızı da gösterir.

Not: Belirli talimatlar Express'e göre hazırlanmış olsa da doğru önbelleğe alma başlıklarını seçmeyle ilgili genel ilkeler tüm web sunucusu ortamları için geçerlidir.

Örnek projeyi tanıyın

Örnek projede kullanacağınız temel dosyalar şunlardır:

• server.js, web uygulamasının içeriğini yayınlayan Node.js kodunu içerir. HTTP isteklerini ve yanıtlarını işlemek için Express'i kullanır. Özellikle express.static(), herkese açık dizindeki tüm yerel dosyaları yayınlamak için kullanılır. Bu nedenle serve-static dokümanları işinize yarayabilir.
• public/index.html, web uygulamasının HTML'sidir. Çoğu HTML dosyası gibi, URL'sinin bir parçası olarak sürüm bilgilerini içermez.
• public/app.15261a07.js ve public/style.391484cf.css, web uygulamasının JavaScript ve CSS öğeleridir. Bu dosyaların her biri, URL'lerinde içeriklerine karşılık gelen bir karma oluşturma işlevi içerir. Yüklenecek belirli sürümlü URL'yi takip etmek index.html'ün sorumluluğundadır.

Not: "Gerçek dünyada" karma oluşturma ve HTML dosyalarını en son sürüm URL'ye referans verecek şekilde güncelleme işlemi, webpack gibi bir derleme aracı tarafından gerçekleştirilir. Bu kod laboratuvarının amaçları doğrultusunda, karmaların daha önce gerçekleşmiş bir derleme sürecinin parçası olarak oluşturulduğunu varsayın.

HTML'miz için önbelleğe alma üstbilgilerini yapılandırma

Sürüm bilgisi içermeyen URL'lerle ilgili isteklere yanıt verirken yanıt mesajlarınıza Cache-Control: no-cache eklediğinizden emin olun. Bununla birlikte, iki ek yanıt başlığından birini ayarlamanızı öneririz: Last-Modified veya ETag. index.html bu kategoriye girer. Bu işlemi iki adıma ayırabilirsiniz.

Öncelikle Last-Modified ve ETag üstbilgileri, etag ve lastModified yapılandırma seçenekleri tarafından kontrol edilir. Bu iki seçenek de tüm HTTP yanıtları için varsayılan olarak true olarak ayarlanır. Bu nedenle, mevcut kurulumda bu davranışı elde etmek için etkinleştirmeniz gerekmez. Ancak yine de yapılandırmanızda açık seçeneği belirleyebilirsiniz.

İkinci olarak, Cache-Control: no-cache üst bilgisini ekleyebilmeniz gerekir ancak yalnızca HTML dokümanlarınız için (bu durumda index.html). Bu üstbilgiyi koşullu olarak ayarlamanın en kolay yolu, özel bir setHeaders function yazmak ve bu içinde gelen isteğin bir HTML dokümanı için olup olmadığını kontrol etmektir.

• Projeyi düzenlenebilir hale getirmek için Düzenlemek için remiks oluştur'u tıklayın.

server.js'teki statik yayınlama yapılandırması şu şekilde başlar:

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

• Yukarıda açıklanan değişiklikleri yaptığınızda aşağıdaki gibi bir sonuç elde edersiniz:

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');
    }
  },
}));

Sürümlü URL'ler için önbelleğe alma üstbilgilerini yapılandırma

"Parmak izi" veya sürüm bilgileri içeren ve içeriklerinin hiçbir zaman değişmemesi amaçlanan URL'lerle ilgili isteklere yanıt verirken yanıtlarınıza Cache-Control: max-age=31536000 ekleyin. app.15261a07.js ve style.391484cf.css bu kategoriye girer.

Son adımda kullanılan setHeaders function değerinden yararlanarak, belirli bir isteğin sürümlü bir URL için olup olmadığını kontrol etmek üzere ek mantık ekleyebilir ve bu durumda Cache-Control: max-age=31536000 üstbilgisini ekleyebilirsiniz.

Bunu yapmanın en güçlü yolu, istenen öğenin karma oluşturma işlemlerinin dahil olduğunu bildiğiniz belirli bir kalıpla eşleşip eşleşmediğini görmek için bir normal ifade kullanmaktır. Bu örnek projede, her zaman 0-9 rakamları ve a-f küçük harflerinden oluşan sekiz karakter (yani on altılık karakterler) kullanılır. Karma oluşturma işlemi her zaman her iki taraftan da . karakteriyle ayrılır.

Bu genel kurallarla eşleşen bir normal ifade new RegExp('\\.[0-9a-f]{8}\\.') olarak ifade edilebilir.

Not: Gelecekte yaşanabilecek sorunlardan korunmak için bu kuralları oluştururken mümkün olduğunca spesifik olmanız önerilir. .js veya .css dosya uzantısını kontrol etmek gibi daha genel bir eşleşme, projenize sürümlenmemiş ek JavaScript veya CSS öğeleri eklerseniz ileride sorun oluşturabilir.

• setHeaders işlevini şu şekilde değiştirin:

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');
    }
  },
}));

Geliştirici Araçları'nı kullanarak yeni davranışı onaylama

Not: Bu codelab ile çalışarak Chrome'un Geliştirici Araçları'ndaki Ağ panelini inceleyebilirsiniz.

Statik dosya sunucusunda yapılan değişikliklerle birlikte, DevTools Ağ paneli açıkken canlı uygulamayı önizleyerek doğru üstbilgilerin ayarlandığından emin olabilirsiniz.

• Siteyi önizlemek için Uygulamayı Görüntüle'ye, ardından Tam Ekran'a basın.

• Ağ panelinde gösterilen sütunları, sütun başlığını sağ tıklayarak en alakalı bilgileri içerecek şekilde özelleştirin:

Burada dikkat edilmesi gereken sütunlar Name, Status, Cache-Control, ETag ve Last-Modified'dir.

• Geliştirici Araçları'nı Ağ panelinde açıkken sayfayı yenileyin.

Sayfa yüklendikten sonra Ağ panelinde aşağıdaki gibi görünen girişler görürsünüz:

İlk satır, gittiğiniz HTML dokümanı içindir. Bu, Cache-Control: no-cache ile düzgün şekilde yayınlanır. Söz konusu istek için HTTP yanıt durumu 304 şeklindedir. Bu, tarayıcının önbelleğe alınmış HTML'yi hemen kullanmaması gerektiğini bildiği, bunun yerine önbelleğindeki HTML'de güncelleme olup olmadığını görmek için Last-Modified ve ETag bilgilerini kullanarak web sunucusuna bir HTTP isteği gönderdiği anlamına gelir. HTTP 304 yanıtı, güncellenmiş HTML olmadığını gösterir.

Not: Cache-Control: no-cache, "önbelleğe alınan kopya hiç kullanılmadı" anlamına gelmez. Bu, "her zaman önce sunucuyu kontrol et ve HTTP 304 yanıtı varsa önbelleğe alınmış kopyayı kullan" anlamına gelir.

Sonraki iki satır, sürümlü JavaScript ve CSS öğeleri içindir. Bunların Cache-Control: max-age=31536000 ile yayınlandığını ve her birinin HTTP durumunun 200 olduğunu görürsünüz. Kullanılan yapılandırma nedeniyle Node.js sunucusuna gerçek bir istek gönderilmez. Girişi tıkladığınızda, yanıtın "(disk önbelleğinden)" geldiği de dahil olmak üzere ek ayrıntılar gösterilir.

ETag ve Son Değiştirme Tarihi sütunlarının gerçek değerleri çok önemli değildir. Önemli olan, bunların ayarlandığını doğrulamaktır.

Özet

Bu codelab'deki adımları uygulayarak HTTP önbelleğini en iyi şekilde kullanmak için Express'i kullanarak Node.js tabanlı bir web sunucusunda HTTP yanıtı üstbilgilerini nasıl yapılandıracağınızı öğrendiniz. Ayrıca, Chrome'un Geliştirici Araçları'ndaki Ağ paneli aracılığıyla beklenen önbelleğe alma davranışının kullanıldığını doğrulamanız gereken adımlar da vardır.