Uygulama içeriğini önbelleğe alma

Cloud CDN, App Hosting'ın web uygulamanız için sunduğu desteğin önemli bir parçasıdır. Arka uçunuza yapılan her istek önce Cloud CDN üzerinden geçer. CDN'de önbelleğe alınmış içerikler, web uygulamanızın sunucu kodunu çalıştıran Cloud Run hizmetine gitmeden hemen kullanıcıya sunulur. CDN'lerin genel avantajları hakkında daha fazla bilgiyi web.dev sitesinde bulabilirsiniz.

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

Önbelleğe alınabilir içerik

Cloud CDN, aşağıdaki koşulların TÜMÜ geçerliyse yanıtları önbelleğe alır:

  1. İstek bir GET ise

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

  3. Yanıtta max-age veya s-maxage yönergesini içeren bir Cache-Control üstbilgisi ya da gelecekte bir zaman damgası içeren bir Expires üstbilgisi var.

  4. Yanıtta, açık bir public yönergesi içeren bir Age başlığı veya 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.

Ayrıca aşağıdakilerden HİÇBİRİ doğru değildir:

  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 veya Next-Router-Segment-Prefetch dışında bir değere sahip bir Vary başlığı var.

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

  4. İstek, no-store yönergesi içeren bir Cache-Control başlığına sahiptir.

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

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

Next.js

Next.js, önbellek kontrolü yönergelerini bir dizi faktöre göre dolaylı olarak ayarlar. Ancak next.config.js dosyanızda üstbilgeyi manuel olarak ayarlayarak bu ayarları 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, kutudan çıkar çıkmaz açık bir şekilde önbelleğe alma denetimi talimatları belirlemez. Sunucu rotalarınıza önbelleğe alma denetimi üstbilgilerini 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ınmadığından emin olmak 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',
    }
  }
];

Uyum sağlanan yönergeler

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

Direktif İstek Yanıt
no-store Bir istekte bulunduğunda yanıt önbelleğe alınmaz. no-store içeren yanıtlar önbelleğe alınmaz.
no-cache İstemcilerin kaynağın yeniden doğrulamasını 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ğrulanmalıdır.
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 bu yönergeyi eklemek 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 (tarayıcılar gibi) sonucu yine de önbelleğe alabilir. Yanıtların tümünün önbelleğe alınmasını ö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 SECONDS değerine kadar önbelleğe alınır.
s-maxage=SECONDS Yok s-maxage yönergesini içeren bir yanıt, tanımlanan SECONDS değerine kadar önbelleğe alınır. Hem max-age hem de s-maxage mevcutsa 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 geçerli değildir.
max-stale=SECONDS max-stale istek yönergesi, istemcinin kabul etmeye hazır olduğu maksimum güncel olmama süresini (saniye cinsinden) belirtir. Cloud CDN bu isteği dikkate alır ve yalnızca yanıtın eskiliği max-stale yönergesinden 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 işlemi eşzamansız olarak gerçekleşirken stale-while-revalidate içeren bir yanıt, SECONDS saniye boyunca istemciye sunulur.
must-revalidate Yok must-revalidate içeren bir yanıt, süresi dolduktan sonra kaynak sunucuda 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 sunucuda yeniden doğrulanır. Bu yönergeyi içeren yanıtlar eski olarak sunulmaz.
no-transform Yok Cloud CDN tarafından herhangi bir dönüştürme işlemi uygulanmaz.

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

App Hosting konsolunun Kullanım sekmesindeki "Cloud CDN - Giden Bant Genişliği" grafiği, sunulmuş olan önbelleğe alınmış ve önbelleğe alınmamış baytları gösterir ve her kullanım için bir işaret içerir. Önbelleğe alma optimizasyon çalışmalarınızın ne kadar etkili olduğunu ölçmek için bu grafiği kullanabilirsiniz.