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

Jeff Posnick

Bu codelab'de, Express sunum çerçevesini çalıştırarak Node.js tabanlı bir web sunucusu tarafından döndürülen HTTP önbelleğe alma üst bilgilerini nasıl değiştireceğiniz gösterilmektedir. Burada, Chrome Geliştirici Araçları'ndaki Ağ panelini kullanarak, beklediğiniz önbelleğe alma davranışının gerçekten uygulandığının nasıl onaylanacağı da gösterilmektedir.

Örnek projeyi tanıyın

Örnek projede çalışacağınız anahtar 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(), ortak dizindeki tüm yerel dosyaları sunmak için kullanılır. Bu nedenle, serve-static belgeleri faydalı olacaktır.
• public/index.html, web uygulamasının HTML'sidir. Çoğu HTML dosyası gibi bu dosya da URL'sinin bir parçası olarak herhangi bir sürüm oluşturma bilgisi içermez.
• public/app.15261a07.js ve public/style.391484cf.css, web uygulamasının JavaScript ve CSS öğeleridir. Bu dosyaların her birinin URL'lerinde, içeriklerine karşılık gelen bir karma değer bulunur. index.html, hangi sürüm oluşturulmuş URL'nin yükleneceğini izlemekten sorumludur.

HTML'miz için önbelleğe alma üst bilgilerini yapılandırın

Sürüm oluşturma bilgisi içermeyen URL isteklerine 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 önerilir: Last-Modified veya ETag. index.html bu kategoriye girer. Bunu iki adıma bölebilirsiniz.

Öncelikle, Last-Modified ve ETag başlıkları etag ve lastModified yapılandırma seçenekleri tarafından kontrol edilir. Bu seçeneklerin ikisi de aslında tüm HTTP yanıtları için varsayılan olarak true değerine ayarlıdır. Dolayısıyla bu geçerli kurulumda, bu davranışı elde etmek için etkinleştirmeniz gerekmez. Ancak yapılandırmanızda yine de açık olabilirsiniz.

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

• Projeyi düzenlenebilir hale getirmek için Düzenlenecek remiks'i tıklayın.

server.js içindeki statik sunum 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ümü tutulan URL'ler için önbelleğe alma üst bilgilerini yapılandırma

"Parmak izi" veya sürüm oluşturma bilgilerini içeren ve içeriği hiçbir zaman değiştirilmesi amaçlanmayan URL isteklerine 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 functiondan yola çıkarak, belirli bir isteğin sürüm oluşturulmuş bir URL için olup olmadığını kontrol etmek için ilave mantık ekleyebilirsiniz. Böyle bir durumda Cache-Control: max-age=31536000 üst bilgisini ekleyin.

Bunu yapmanın en sağlam yolu, istenen öğenin karmaların yer aldığını bildiğiniz belirli bir kalıpla eşleşip eşleşmediğini görmek için normal ifade kullanmaktır. Bu örnek projede, her zaman 0-9 arasındaki rakam grubundan sekiz karakter ve a-f arasındaki küçük harflerden (ör. onaltılık karakterler) alınır. Karma değer, her iki tarafta bir . 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 aşağıdaki gibi 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şiklikler yapıldıktan sonra, Geliştirici Araçları Ağ paneli açık olarak yayındaki uygulamayı önizleyerek doğru başlıkların ayarlandığından emin olabilirsiniz.

• Siteyi önizlemek için Uygulamayı Göster'e, ardından Tam Ekran'a basın.

• Sütun başlığını sağ tıklayarak en alakalı bilgileri eklemek için Ağ panelinde görüntülenen sütunları özelleştirin:

Burada, dikkat etmeniz gereken sütunlar şunlardır: Name, Status, Cache-Control, ETag ve Last-Modified.

• DevTools penceresi açıkken sayfayı yenileyin.

Sayfa yüklendikten sonra, Ağ panelinde aşağıdakine benzer girişler görmeniz gerekir:

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

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örmeniz gerekir. Kullanılan yapılandırma nedeniyle, Node.js sunucusuna gerçekten bir istek gönderilmez ve girişi tıkladığınızda yanıtın "(disk önbelleğinden)" geldiği bilgisi de dahil olmak üzere ek ayrıntılar gösterilir.

ETag ve Last-Modified sütunlarının gerçek değerleri çok önemli değildir. Önemli olan, ayarlandıklarından emin olmaktır.

Konuyu özetleme

Bu codelab'deki adımları tamamladıktan sonra, HTTP önbelleğinin en iyi şekilde kullanılması için Node.js tabanlı bir web sunucusunda, Express kullanarak HTTP yanıt başlıklarını nasıl yapılandıracağınızı öğrendiniz. Ayrıca, Chrome Geliştirici Araçları'ndaki Ağ paneli aracılığıyla, beklenen önbelleğe alma davranışının kullanılmakta olduğunu onaylamanız için gereken adımları da uygulayabilirsiniz.