Web Programlama Eğitimi: HTTP Önbellek Sözleşmesi Tasarlama

Web programlama eğitimi ile ölçülebilir önbellek hedefi kurmak

Bir frontend development eğitimi projesinde önbellek sorununu "sayfa yavaş" diye değil, rota başına tekrar eden istek sayısı, aktarılan bayt ve doğrulama gecikmesiyle tanımlayın. Chrome DevTools Network panelinde Disable cache kapalıyken aynı rotayı iki kez gezip Fetch/XHR isteklerini HAR olarak dışa aktarın. Ardından WebPageTest veya Playwright ile ilk ve tekrar ziyaret senaryolarını ayrı ölçün. Hedef örneği: ikinci ziyaret için /api/catalog isteğinde gövdeden aktarılan baytı 180 KB'den 0 B'a indirmek, ancak veri en fazla 60 saniye eski kalabilsin.

javascript eğitimi içinde yalnızca performance.getEntriesByType('resource') çıktısına güvenmek yanıltıcı olabilir: bazı tarayıcılar cross-origin kaynaklarda Timing-Allow-Origin yoksa ayrıntılı zamanları sıfırlar. Kendi origininizde gerçek kullanıcı ölçümü için response header üzerinden cache durumunu görünür yapın ve PerformanceObserver ile kaydedin. Önce ve sonra aynı kullanıcı akışında p50/p95 transferSize ve kaynak sayısını karşılaştırın.

const resources = performance.getEntriesByType('resource')
  .filter((e) => e.name.includes('/api/catalog'));

for (const e of resources) {
  console.log({
    url: e.name,
    durationMs: Math.round(e.duration),
    transferredBytes: e.transferSize,
    encodedBytes: e.encodedBodySize,
    decodedBytes: e.decodedBodySize
  });
}

Burada transferSize: 0 tek başına başarı kanıtı değildir; bellek önbelleği, disk önbelleği veya 304 doğrulaması farklı zaman maliyetleri üretir. Network panelindeki Status, Size ve response header'larını birlikte kaydedin.

Cache-Control ve ETag ile API sözleşmesini doğru kurmak

Katalog gibi herkese aynı JSON dönen, fakat sık güncellenen bir endpoint için no-store gereksiz pahalıdır; bu direktif tarayıcının yanıtı saklamasını tamamen engeller. Bunun yerine tarayıcıya yeniden doğrulama zorunluluğu veren private, max-age=0, must-revalidate ve bir ETag gönderin. İstemci sonraki istekte If-None-Match taşır, veri değişmemişse sunucu gövdesiz 304 döner. Bu yaklaşım bayt maliyetini düşürür ancak TLS, CDN ve origin doğrulama turunu sıfırlamaz; bu nedenle 304 süresini de ölçmek gerekir.

Aşağıdaki Fastify örneğinde ETag, veritabanı kaydının monotonik revision alanından üretilir. JSON dizisini her istekte hashlemekten kaçınır; milyonlarca ürünlü bir yanıtta JSON.stringify ve SHA-256 CPU maliyeti, koşullu isteğin kazancını silebilir. W/ zayıf ETag kullanımı burada kasıtlıdır: revision aynıysa alan sırası veya whitespace değişse bile uygulama açısından kaynak eşdeğerdir.

fastify.get('/api/catalog', async (request, reply) => {
  const revision = await catalogRepository.currentRevision();
  const etag = `W/"catalog-${revision}"`;

  reply.header('Cache-Control', 'private, max-age=0, must-revalidate');
  reply.header('ETag', etag);

  if (request.headers['if-none-match'] === etag) {
    return reply.code(304).send();
  }

  const products = await catalogRepository.listPublic();
  return reply.send({ revision, products });
});

Doğrulamayı komut satırında test edin: curl -i https://app.example.com/api/catalog ile ETag'i alın, sonra curl -i -H 'If-None-Match: W/"catalog-42"' https://app.example.com/api/catalog çalıştırın. İkinci yanıtta 304 ve boş gövde görmelisiniz.

Kişiye özel yanıta yanlışlıkla public vermek ciddi bir veri sızıntısıdır. Örneğin sepet özeti cookie ile belirleniyorsa CDN aynı URL'nin bir kullanıcısına ait gövdesini diğerine servis edebilir. Bu endpoint için Cache-Control: private, no-cache kullanın; no-cache adı yanıltıcı olsa da depolamayı yasaklamaz, her yeniden kullanımda doğrulama ister. Content negotiation kullanıyorsanız Vary: Accept-Language, Accept-Encoding ekleyin. Vary: Authorization ise cache anahtarı kardinalitesini kullanıcı sayısına yaklaştırır ve paylaşımlı cache hit oranını pratikte yok edebilir.

ReactJS eğitimi ve React Native eğitimi için istemci veri katmanı

reactjs eğitimi içinde yaygın hata, HTTP'nin zaten yaptığı yeniden doğrulamayı her bileşen mount olduğunda ikinci bir fetch ile çoğaltmaktır. TanStack Query kullanıyorsanız kaynak değişim hızına göre staleTime belirleyin: ürün kategorileri için 60 saniye, borsa fiyatı için birkaç saniye gibi. staleTime tarayıcı HTTP cache TTL'i değildir; aynı JavaScript çalışma zamanındaki observer'ların yeni istek üretip üretmeyeceğini kontrol eder. Bu iki katmanı farklı sorumluluklarla ayarlayın.

import { useQuery } from '@tanstack/react-query';

async function getCatalog({ signal }) {
  const response = await fetch('/api/catalog', { signal });
  if (!response.ok) throw new Error(`catalog: ${response.status}`);
  return response.json();
}

export function useCatalog() {
  return useQuery({
    queryKey: ['catalog'],
    queryFn: getCatalog,
    staleTime: 60_000,
    gcTime: 10 * 60_000,
    refetchOnWindowFocus: false
  });
}

Değişiklikten önce/sonra React Query Devtools ile aynı anda mount olan bileşenlerin query sayısını kontrol edin; Network panelinde hedef, tek rota geçişinde N adet aynı /api/catalog isteğinin 1'e inmesidir.

react native eğitimi tarafında tarayıcıdaki disk HTTP cache davranışını varsaymayın. iOS ve Android ağ yığınları, fetch uygulaması ve uygulama yaşam döngüsü web ile aynı cache semantiğini garanti etmez. TanStack Query'nin kalıcı depolamasını AsyncStorage ile kuracaksanız yalnızca kullanıcıya ait olmayan veya şifrelenmiş veriyi persist edin; access token, ödeme taslağı ve PII içeren query cache'i cihaz yedeğine sızabilir. Ayrıca oturum değişiminde queryClient.clear() çağrısını logout akışına ekleyin; aksi halde yeni hesap önceki hesabın RAM'deki profilini kısa süreliğine görebilir.

Angular eğitimi, AngularJS eğitimi ve doğrulama sınırları

angular eğitimi projelerinde HttpClient interceptor ile her GET yanıtına uygulama içi cache eklemek caziptir, ancak HTTP header sözleşmesini by-pass eden basit bir Map<string, Response> çözümü ETag, Vary ve kullanıcı değişimi kurallarını kaybeder. Önce HttpClient'in tarayıcı HTTP cache'inden yararlanmasına izin verin; yalnızca aynı uygulama oturumunda deduplikasyon gerekiyorsa interceptor anahtarına URL'nin yanında dil, tenant ve yetki kapsamını dahil edin. İstek nesnesi immutable olduğu için header eklemek gerektiğinde clone zorunludur.

export const localeInterceptor: HttpInterceptorFn = (req, next) => {
  if (req.method !== 'GET') return next(req);

  const locale = navigator.language;
  return next(req.clone({
    setHeaders: { 'Accept-Language': locale }
  }));
};

Sunucuda buna karşılık Vary: Accept-Language yoksa CDN, Türkçe üretilen cevabı İngilizce istek için de seçebilir. Bu hata yerelde tek dil kullanan testlerde görünmez; curl ile iki farklı Accept-Language isteği göndererek doğrulayın.

angularjs eğitimi için sürdürülen eski uygulamalarda $http cache seçeneği yalnızca istemci belleğinde URL anahtarlı bir cache kurar; tenant veya Authorization bağlamını otomatik ayırmaz. AngularJS uygulamasını kademeli taşırken önce API yanıtlarına doğru Cache-Control ve ETag eklemek daha güvenli bir ara adımdır, çünkü hem AngularJS hem Angular istemcileri aynı HTTP sözleşmesini kullanır. Service worker eklenmişse DevTools Application panelinden Cache Storage'ı temizleyip offline fallback'in 304 yanıtını gövde gibi saklamadığını test edin; 304 yanıtının gövdesi yoktur ve CacheStorage'a doğrudan yazılması sonraki okumada bozuk JSON üretir.

VueJS eğitimi ile frontend framework karşılaştırması için aynı test

vuejs eğitimi uygulamasında Vue Query ile React Query aynı cache çekirdeği mantığını paylaşır; bu nedenle frontend framework karşılaştırması yaparken framework benchmark'ı yerine aynı API sözleşmesi ve aynı kullanıcı akışını kıyaslayın. Örneğin Playwright ile katalog rotasına ilk giriş, başka rotaya geçiş ve geri dönüş senaryosunu üç framework için çalıştırın. Sonuç tablosunda istek adedi, toplam transfer, 304 adedi ve rota tamamlanma süresini ayrı sütunlarda tutun. Sadece Lighthouse skorunu karşılaştırmak, sıcak cache ile soğuk cache farkını gizler.

CI içinde header regresyonunu yakalamak için API testine kesin assertion ekleyin. Bu test, bir proxy veya backend değişikliği ETag'i düşürdüğünde bunu kod incelemesinde görünür kılar.

import { test, expect } from '@playwright/test';

test('catalog is conditionally cacheable', async ({ request }) => {
  const first = await request.get('/api/catalog');
  const etag = first.headers()['etag'];

  expect(first.headers()['cache-control']).toContain('must-revalidate');
  expect(etag).toBeTruthy();

  const second = await request.get('/api/catalog', {
    headers: { 'If-None-Match': etag }
  });
  expect(second.status()).toBe(304);
  expect(await second.body()).toHaveLength(0);
});

Testi CDN önünde ve doğrudan origin'e karşı ayrı çalıştırın. CDN'nin ETag'i dönüştürmesi, sıkıştırılmış yanıtı yeniden üretmesi veya Cache-Control'u override etmesi, lokal backend testinde görünmeyen iki farklı davranış oluşturabilir.

Sık Sorulan Sorular

Web programlama eğitimi sırasında ETag mi yoksa max-age mi kullanmalıyım?

Bunlar alternatif değildir. Değişiklik toleransınız varsa örneğin Cache-Control: private, max-age=60 ile 60 saniye ağ isteğini önleyin. Her kullanımda güncel veri gerekirse max-age=0, must-revalidate ve ETag kullanın; tarayıcı If-None-Match ile doğrular, değişiklik yoksa 304 alır. Chrome Network panelinde ikinci isteğin 304 mü, memory cache mi olduğunu ayrı kaydedin.

ReactJS eğitimi projesinde TanStack Query staleTime ETag yerine geçer mi?

Hayır. staleTime yalnızca TanStack Query'nin JavaScript belleğinde yeniden fetch başlatma kararını etkiler. ETag ise tarayıcı, CDN ve origin arasındaki HTTP doğrulama protokolüdür. Aynı kaynak için örneğin staleTime: 60000 ve sunucuda ETag ile max-age=0 birlikte kullanılabilir.

Angular eğitimi uygulamasında HttpInterceptor ile API cache anahtarı nasıl seçilir?

Salt URL kullanmayın. GET cache anahtarına en az URL, normalize edilmiş query parametreleri, Accept-Language, tenant kimliği ve yanıtı değiştiren diğer header'ları katın. Daha güvenli seçenek, bu varyasyonları sunucuda Vary header'ı ile tanımlayıp tarayıcı HTTP cache'ini kullanmaktır. Yetkili kullanıcı verisini ortak bir interceptor Map'inde tutuyorsanız logout anında Map'i temizleyin.

Frontend framework karşılaştırması yaparken cache performansı nasıl ölçülür?

Her framework için aynı Playwright akışını, aynı test verisini ve aynı throttling profilini çalıştırın. Soğuk cache ve sıcak cache koşullarını ayırın; Network HAR dosyasından istek sayısı, transferSize, 304 sayısı ve rota süresini çıkarın. Bir frameworkte service worker açık, diğerinde kapalıysa karşılaştırma geçerli değildir.