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

Jeff Posnick

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.

Örnek projeyi tanıyın

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

• server.js, web uygulamasının içeriğini sunan 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 bilgisi 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.

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 seçeneklerin her ikisi de aslında tüm HTTP yanıtları için varsayılan olarak true değerini alır. Dolayısıyla bu mevcut kurulumda, bu davranışı elde etmek için etkinleştirmeniz gerekmez. Ancak yine de yapılandırmanızı açıkça belirtebilirsiniz.

İ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 başlığı koşullu olarak ayarlamanın en kolay yolu, özel bir setHeaders function yazmak ve bunun içinde gelen isteğin bir HTML belgesi 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ıktan sonra 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 bilgisi içeren ve içeriği asla değişmeyen URL'lerle ilgili istekleri yanıtlarken 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.

• setHeaders işlevini şu şekilde görünecek ş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ışı onaylayın

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ın Ağ paneli açıkken sayfayı yenileyin.

Sayfa yüklendikten sonra Ağ panelinde aşağıdakine benzer 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 bir şekilde sunulur. 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.

Sonraki iki satır, sürümü olan JavaScript ve CSS öğeleri içindir. Bunların Cache-Control: max-age=31536000 ile sunulduğunu ve her birinin HTTP durumunun 200 olduğunu göreceksiniz. 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.