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

Jeff Posnick

Not: Bu codelab'de 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 sunucusu tarafından döndürülen HTTP önbelleğe alma başlıklarını nasıl değiştireceğiniz 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 doğrulayacağınızı da gösterir.

Not: Özel talimatlar Express'e göre uyarlanmış 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ıma

Örnek projede üzerinde çalışacağı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ı 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, URL'sinde 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 birinin URL'sinde, içeriklerine karşılık gelen bir karma bulunur. Yüklenmesi gereken sürümlü URL'yi takip etmek index.html sorumluluğundadır.

Not: "Gerçek dünyada", karma oluşturma ve HTML dosyalarını en yeni sürüme sahip URL'ye referanslar içerecek şekilde güncelleme işlemi, webpack gibi bir derleme aracı tarafından gerçekleştirilir. Bu codelab'de, karma oluşturma işleminin daha önce gerçekleşen 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'lere yönelik 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 önerilir: Last-Modified veya ETag. index.html bu kategoriye girer. Bu süreci iki adıma ayırabilirsiniz.

İlk olarak, Last-Modified ve ETag üstbilgileri etag ve lastModified yapılandırma seçenekleri tarafından kontrol edilir. Bu seçeneklerin her ikisi de tüm HTTP yanıtları için varsayılan olarak true değerini alır. Bu nedenle, mevcut kurulumda bu davranışı elde etmek için etkinleştirme yapmanız gerekmez. Ancak yine de yapılandırmanızda açıkça belirtebilirsiniz.

İkinci olarak, Cache-Control: no-cache üst bilgisini ekleyebilmeniz gerekir ancak bu işlem yalnızca HTML belgeleriniz (bu örnekte index.html) için geçerlidir. Bu başlığı koşullu olarak ayarlamanın en kolay yolu, özel bir setHeaders function yazmak ve bu işlevde, gelen isteğin bir HTML belgesi için olup olmadığını kontrol etmektir.

server.js dosyasındaki statik sunma yapılandırması şu şekilde başlar:

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

• Yukarıda açıklanan değişiklikleri yaptığınızda şuna benzer 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 başlıklarını yapılandırma

"fingerprint" veya sürüm bilgisi içeren ve içeriği hiçbir zaman değişmeyecek URL'lere yönelik 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 öğesini temel alarak, belirli bir isteğin sürümlü bir URL için olup olmadığını kontrol etmek üzere ek mantık ekleyebilir ve öyleyse Cache-Control: max-age=31536000 başlığını ekleyebilirsiniz.

Bunu yapmanın en güvenilir yolu, istenen öğenin karma değerlerin dahil olduğunu bildiğiniz belirli bir kalıpla eşleşip eşleşmediğini görmek için normal ifade kullanmaktır. Bu örnek projede, 0-9 rakamları ve a-f küçük harflerinden (yani onaltılık karakterler) oluşan sekiz karakterlik bir dizedir. Karma her zaman her iki tarafında bir . karakteriyle ayrılır.

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

Not: Bu kuralları oluştururken gelecekteki sorunlara karşı korunmak için mümkün olduğunca spesifik olmak faydalı olacaktır. .js veya .css dosya uzantısını kontrol etmek gibi daha genel bir eşleşme, projenize sürümsüz ek JavaScript veya CSS öğeleri eklemeniz durumunda ileride sorunlara yol açabilir.

• 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ışı onaylama

Not: Bu codelab'i inceleyerek Chrome'un Geliştirici Araçları'ndaki Ağ paneli hakkında bilgi edinebilirsiniz.

Statik dosya sunucusunda yapılan değişikliklerle, Geliştirici Araçları Ağ paneli açıkken canlı uygulamayı önizleyerek doğru başlıkların ayarlandığından emin olabilirsiniz.

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

Burada dikkat edilmesi gereken sütunlar Name, Status, Cache-Control, ETag ve Last-Modified sütunlarıdır.

• Geliştirici Araçları'nda 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 belgesi içindir. Bu, Cache-Control: no-cache ile düzgün bir şekilde sunulur. Bu isteğin HTTP yanıt durumu 304. Bu, tarayıcının önbelleğe alınmış HTML'yi hemen kullanmaması gerektiğini bildiği, bunun yerine web sunucusuna bir HTTP isteği göndererek önbelleğindeki HTML'de güncelleme olup olmadığını görmek için Last-Modified ve ETag bilgilerini kullandığı anlamına gelir. HTTP 304 yanıtı, güncellenmiş HTML olmadığını gösterir.

Not: Cache-Control: no-cache, "önbelleğe alınan kopyayı hiçbir zaman kullanma" anlamına gelmez. "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üme sahip 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ç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 Last-Modified sütunlarının gerçek değerleri çok önemli değildir. Önemli olan, bunların ayarlandığını doğrulamaktır.

Özetleme

Bu codelab'deki adımları uygulayarak, HTTP önbelleğinin en iyi şekilde kullanılması için Express kullanarak Node.js tabanlı bir web sunucusunda HTTP yanıt başlıklarını nasıl yapılandıracağınızı öğrendiniz. Ayrıca Chrome'un Geliştirici Araçları'ndaki Ağ panelini kullanarak beklenen önbelleğe alma davranışının kullanıldığını onaylamak için gereken adımları da öğrendiniz.