Uygulama içeriğini önbelleğe alma

Cloud CDN, App Hosting tarafından web uygulamanıza sunulan desteğin önemli bir parçasıdır. Arka ucunuza gönderilen her istek önce Cloud CDN'den geçer. CDN'de önbelleğe alınmış içerikler, web uygulamanızın sunucu kodunu çalıştıran Cloud Run hizmetine gitmeden doğrudan kullanıcıya sunulur. CDN'lerin genel avantajları hakkında daha fazla bilgiyi web.dev adresinde bulabilirsiniz.

Temel Cloud CDN yapılandırması App Hosting tarafından ayarlanır ve değiştirilemez. Ancak sayfa yükleme hızlarını artırmak, faturalandırılan önbelleğe alınmamış içeriği azaltmak ve Cloud Run'a giden trafiği en aza indirmek için önbelleğe alma işleminizi optimize etmek amacıyla yapabileceğiniz birkaç şey vardır.

Önbelleğe alınabilir içerik

Aşağıdaki koşulların TÜMÜ karşılanıyorsa Cloud CDN yanıtları önbellekte depolar:

  1. İstek bir GET isteğidir.

  2. Yanıtın durum kodu 200, 203, 204, 206, 300, 301, 302, 307, 308, 404, 405, 410, 421, 451 veya 501.

  3. Yanıtta max-age veya s-maxage yönergesi içeren bir Cache-Control üstbilgisi ya da gelecekteki bir zaman damgasını içeren bir Expires üstbilgisi vardır.

  4. Yanıtta bir Age başlığı veya açık bir public yönergesi içeren Cache-Control başlığı vardır.

  5. Yanıtın boyutu 10 MiB'tan küçük veya bu değere eşit olmalıdır.

ve aşağıdakilerden HİÇBİRİ doğru değilse:

  1. Yanıtta Set-Cookie başlığı var.

  2. Yanıtta Accept, Accept-Encoding, Access-Control-Request-Headers, Access-Control-Request-Method, Origin, Sec-Fetch-Dest, Sec-Fetch-Mode, Sec-Fetch-Site, X-Goog-Allowed-Resources, X-Origin, RSC, Next-Router-State-Tree, Next-Router-Prefetch, Next-Router-Segment-Prefetch veya Next-Url dışında bir değere sahip Vary üstbilgisi var.

  3. Yanıtta no-store veya private yönergesini içeren bir Cache-Control üstbilgisi vardır.

  4. İstekte no-store yönergesi içeren bir Cache-Control başlığı var.

  5. Yanıtın açık bir önbellek kontrol yönergesi yoksa istekte Authorization başlığı bulunur.

Önbellek kontrolü yönergeleriyle davranışı özelleştirme

Next.js

Next.js, çeşitli faktörlere bağlı olarak önbellek kontrolü yönergelerini dolaylı olarak ayarlar. Ancak next.config.js dosyanızda üstbilgiyi manuel olarak ayarlayarak bunları geçersiz kılabilirsiniz. Örneğin, bir sayfanın Cloud CDN'de önbelleğe alınmadığından emin olmak için:

  /** @type {import('next').NextConfig} */
  const nextConfig = {
      headers: async () => [{
          source: "/YOUR_PRIVATE_PAGE",
          headers: [{
              key: "Cache-Control",
              value: "private"
          }],
      }],
  };

Angular

Angular SSR, varsayılan olarak açık önbellek kontrolü yönergeleri ayarlamaz. Sunucu rotalarınızda cache-control üstbilgileri belirterek kendi üstbilgilerinizi ekleyebilirsiniz. Örneğin, Cloud CDN'nin tüm sayfaları bir saat boyunca önbelleğe almasına izin vermek için:

import { RenderMode, ServerRoute } from '@angular/ssr';

export const serverRoutes: ServerRoute[] = [
  {
    path: '**',
    renderMode: RenderMode.Prerender,
    headers: {
      'Cache-Control': 'public, max-age=3600',
    }
  }
];

Belirli bir sayfanın önbelleğe alınmamasını sağlamak için:

import { RenderMode, ServerRoute } from '@angular/ssr';

export const serverRoutes: ServerRoute[] = [
  // ... other routes
  {
    path: 'YOUR_PRIVATE_PAGE',
    renderMode: RenderMode.Server,
    headers: {
      'Cache-Control': 'private',
    }
  }
];

Dikkate alınan yönergeler

Firebase App Hosting'in Cloud CDN örneği, aşağıdaki önbellek kontrolü yönergelerine uyar:

Yönerge İstek Yanıt
no-store İstekte bu başlık varsa yanıt önbelleğe alınmaz. no-store içeren yanıtlar önbelleğe alınmaz.
no-cache İstemcilerin kaynağa yeniden doğrulama başlatmasını veya zorlamasını önlemek için no-cache istek yönergesi yoksayılır. no-cache içeren bir yanıt önbelleğe alınır ancak yayınlanmadan önce kaynakla yeniden doğrulanması gerekir.
public Yok Bu yönerge, önbelleğe alınabilirlik için gerekli değildir ancak proxy'ler tarafından önbelleğe alınması gereken içerikler için eklenmesi en iyi uygulamadır.
private Yok private yönergesini içeren bir yanıt, önbelleğe alınabilir olarak kabul edilse bile Cloud CDN tarafından önbelleğe alınmaz. İstemciler (ör. tarayıcılar) sonucu önbelleğe almaya devam edebilir. Yanıtların önbelleğe alınmasını tamamen önlemek için no-store kullanın.
max-age=SECONDS max-age istek yönergesi yoksayılır. Önbelleğe alınmış bir yanıt, bu başlık isteğe dahil edilmemiş gibi döndürülür. max-age yönergesini içeren bir yanıt, tanımlanan SANİYE değerine kadar önbelleğe alınır.
s-maxage=SECONDS Yok s-maxage yönergesini içeren bir yanıt, tanımlanan SANİYE değerine kadar önbelleğe alınır. Hem max-age hem de s-maxage varsa Cloud CDN tarafından s‑maxage kullanılır. Bu yönergeyi içeren yanıtlar eski olarak sunulmaz. s-max-age (iki kısa çizgi), önbelleğe alma amacıyla kullanılamaz.
max-stale=SECONDS max-stale istek yönergesi, istemcinin kabul etmeye hazır olduğu maksimum eskime süresini (saniye cinsinden) belirler. Cloud CDN bu yönergeye uyar ve yalnızca yanıtın eskiliği max-stale yönergesinden daha azsa eski bir önbelleğe alınmış yanıt döndürür. Aksi takdirde, isteği sunmadan önce yeniden doğrular. Yok
stale-while-revalidate=SECONDS Yok Yeniden doğrulama eşzamansız olarak gerçekleşirken istemciye SECONDS boyunca stale-while-revalidate içeren bir yanıt sunulur.
must-revalidate Yok must-revalidate içeren bir yanıt, süresi dolduktan sonra kaynak sunucuyla yeniden doğrulanır. Bu yönergeyi içeren yanıtlar eski olarak sunulmaz.
proxy-revalidate proxy-revalidate içeren bir yanıt, süresi dolduktan sonra kaynak sunucuyla yeniden doğrulanır. Bu yönergeyi içeren yanıtlar eski olarak sunulmaz.
no-transform Yok Cloud CDN tarafından hiçbir dönüşüm uygulanmaz.

Önbelleğe alınmış ve alınmamış trafiği ölçme

Firebase konsolundaki App Hosting > Kullanım sekmesinde, "Cloud CDN - Giden Trafik Bant Genişliği" grafiği, sunulan önbelleğe alınmış ve önbelleğe alınmamış baytları gösterir ve her kullanıma sunma için bir işaret içerir. Önbellek optimizasyonu çalışmalarınızın etkililiğini ölçmek için bu grafiği kullanabilirsiniz.

Rotaya dayalı izleme ile web uygulamanızdaki belirli rotaların önbellek isabet oranını da görüntüleyebilirsiniz.