Menyimpan konten aplikasi dalam cache

Cloud CDN adalah bagian penting dari dukungan App Hosting untuk aplikasi web Anda. Setiap permintaan ke backend Anda akan melalui Cloud CDN terlebih dahulu. Konten yang sudah di-cache di CDN akan segera ditayangkan kembali kepada pengguna, sehingga melewatkan perjalanan ke layanan Cloud Run yang menjalankan kode server aplikasi web Anda. Anda dapat mempelajari lebih lanjut manfaat umum CDN di web.dev.

Meskipun konfigurasi Cloud CDN dasar ditetapkan oleh App Hosting dan tidak dapat diubah, ada sejumlah hal yang dapat Anda lakukan untuk mengoptimalkan penyimpanan dalam cache agar dapat meningkatkan kecepatan pemuatan halaman, mengurangi konten yang tidak di-cache yang ditagih, dan meminimalkan traffic ke Cloud Run.

Konten yang dapat di-cache

Cloud CDN menyimpan respons dalam cache jika SEMUA kondisi berikut berlaku:

  1. Permintaannya adalah GET

  2. Respons memiliki kode status 200, 203, 204, 206, 300, 301, 302, 307, 308, 404, 405, 410, 421, 451, atau 501.

  3. Respons memiliki header Cache-Control dengan perintah max-age atau s-maxage, atau header Expires dengan stempel waktu di masa mendatang.

  4. Respons memiliki header Age atau header Cache-Control dengan perintah public eksplisit.

  5. Ukuran respons kurang dari atau sama dengan 10 MiB.

dan TIDAK ADA hal berikut yang benar:

  1. Respons memiliki header Set-Cookie

  2. Respons memiliki header Vary dengan nilai selain 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, atau Next-Router-Segment-Prefetch.

  3. Respons memiliki header Cache-Control dengan perintah no-store atau private.

  4. Permintaan memiliki header Cache-Control dengan perintah no-store.

  5. Permintaan memiliki header Authorization, kecuali jika respons memiliki perintah kontrol cache eksplisit.

Menyesuaikan perilaku dengan perintah kontrol cache

Next.js

Next.js menetapkan perintah kontrol cache secara implisit berdasarkan sejumlah faktor. Namun, Anda dapat mengganti ini dengan menetapkan header secara manual di file next.config.js. Misalnya, untuk memastikan halaman tidak di-cache di Cloud CDN:

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

Angular

Angular SSR tidak menetapkan perintah kontrol cache eksplisit secara otomatis. Anda dapat menambahkan header Anda sendiri dengan menentukan header cache-control di rute server. Misalnya, untuk mengizinkan Cloud CDN menyimpan cache semua halaman selama satu jam:

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

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

Atau untuk memastikan halaman tertentu tidak di-cache:

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

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

Perintah yang dihormati

Instance Cloud CDN Firebase App Hosting mengikuti perintah kontrol cache berikut:

Perintah Permintaan Respons
no-store Jika ada dalam permintaan, respons tidak akan di-cache. Respons dengan no-store tidak di-cache.
no-cache Perintah permintaan no-cache diabaikan untuk mencegah klien berpotensi memulai atau memaksa validasi ulang ke origin. Respons dengan no-cache di-cache, tetapi harus divalidasi ulang dengan origin sebelum ditayangkan.
public T/A Perintah ini tidak diperlukan untuk cacheability, tetapi sebaiknya sertakan perintah ini untuk konten yang harus di-cache oleh proxy.
private T/A Respons dengan perintah private tidak di-cache oleh Cloud CDN, meskipun respons tersebut dianggap dapat di-cache. Klien (seperti browser) mungkin masih menyimpan hasil dalam cache. Gunakan no-store untuk mencegah semua penyimpanan ke cache respons.
max-age=SECONDS Perintah permintaan max-age akan diabaikan. Respons yang di-cache ditampilkan seolah-olah header ini tidak disertakan dalam permintaan. Respons dengan perintah max-age di-cache hingga DETIK yang ditentukan.
s-maxage=SECONDS T/A Respons dengan perintah s-maxage di-cache hingga DETIK yang ditentukan. Jika max-age dan s-maxage ada, s‑maxage akan digunakan oleh Cloud CDN. Respons dengan perintah ini tidak ditayangkan jika sudah tidak berlaku. s-max-age (dua tanda hubung) tidak valid untuk tujuan penyimpanan dalam cache.
max-stale=SECONDS Perintah permintaan max-stale menentukan keusangan maksimum (dalam detik) yang bersedia diterima klien. Cloud CDN mematuhi hal ini, dan menampilkan respons yang di-cache dan sudah tidak berlaku hanya jika keusangan respons kurang dari perintah max-stale. Jika tidak, permintaan akan divalidasi ulang sebelum ditayangkan. T/A
stale-while-revalidate=SECONDS T/A Respons dengan stale-while-revalidate ditayangkan ke klien hingga SECONDS saat validasi ulang dilakukan secara asinkron.
must-revalidate T/A Respons dengan must-revalidate divalidasi ulang dengan server asal setelah masa berlakunya habis. Respons dengan perintah ini tidak ditayangkan jika sudah tidak berlaku.
proxy-revalidate Respons dengan proxy-revalidate divalidasi ulang dengan server asal setelah masa berlakunya habis. Respons dengan perintah ini tidak ditayangkan jika sudah tidak berlaku.
no-transform T/A Tidak ada transformasi yang diterapkan oleh Cloud CDN.

Mengukur traffic yang di-cache dan tidak di-cache

Grafik "Cloud CDN - Bandwidth Keluar" di tab Usage di konsol App Hosting menampilkan byte yang di-cache dan tidak di-cache yang ditayangkan, dan memiliki tanda untuk setiap peluncuran. Anda dapat menggunakan grafik ini untuk mengukur efektivitas upaya pengoptimalan cache.