Meng-cache konten aplikasi

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 ditampilkan kepada pengguna, sehingga tidak perlu melakukan perjalanan ke layanan Cloud Run yang menjalankan kode server aplikasi web Anda. Anda dapat mempelajari lebih lanjut tentang manfaat umum CDN di web.dev.

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

Konten yang dapat di-cache

Cloud CDN akan menyimpan respons dalam cache jika SEMUA kondisi berikut terpenuhi:

  1. Permintaan 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 kondisi berikut yang terpenuhi:

  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 perintah 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 langsung. Anda dapat menambahkan perintah sendiri dengan menentukan header kontrol cache di rute server. Misalnya, untuk mengizinkan Cloud CDN meng-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 diterapkan

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

Perintah Permintaan Respons
no-store Jika ada dalam permintaan, respons tidak akan di-cache. Respons dengan no-store tidak akan di-cache.
no-cache Perintah permintaan no-cache akan diabaikan untuk mencegah klien berpotensi memulai atau memaksa validasi ulang ke server asal. Respons dengan no-cache akan di-cache, tetapi harus divalidasi ulang dengan server asal sebelum disajikan.
public T/A Perintah ini tidak diperlukan untuk kemampuan di-cache, tetapi merupakan praktik terbaik untuk menyertakannya bagi konten yang harus di-cache oleh proxy.
private T/A Respons dengan perintah private tidak akan di-cache oleh Cloud CDN, meskipun respons tersebut biasanya dianggap dapat di-cache. Klien (seperti browser) masih mungkin akan meng-cache hasilnya. Gunakan no-store untuk mencegah semua respons di-cache.
max-age=SECONDS Perintah permintaan max-age akan diabaikan. Respons yang di-cache akan ditampilkan seolah-olah header ini tidak disertakan dalam permintaan. Respons dengan perintah max-age akan di-cache hingga SECONDS yang ditentukan.
s-maxage=SECONDS T/A Respons dengan perintah s-maxage akan di-cache hingga SECONDS yang ditentukan. Jika max-age dan s-maxage ada, s‑maxage akan digunakan oleh Cloud CDN. Respons dengan perintah ini tidak akan disajikan jika sudah tidak berlaku. s-max-age (dua tanda hubung) tidak valid untuk tujuan penyimpanan cache.
max-stale=SECONDS Perintah permintaan max-stale menentukan keadaan tidak berlaku maksimum (dalam detik) yang bersedia diterima klien. Cloud CDN akan mematuhi hal ini, dan akan menampilkan respons cache yang tidak berlaku hanya jika keadaan tidak berlaku atas respons kurang dari perintah max-stale. Jika tidak, permintaan akan divalidasi ulang sebelum disajikan. T/A
stale-while-revalidate=SECONDS T/A Respons dengan stale-while-revalidate akan disajikan kepada klien selama maksimum SECONDS saat validasi ulang dilakukan secara asinkron.
must-revalidate T/A Respons dengan must-revalidate akan divalidasi ulang dengan server asal setelah masa berlakunya berakhir. Respons dengan perintah ini tidak akan disajikan jika sudah tidak berlaku.
proxy-revalidate Respons dengan proxy-revalidate akan divalidasi ulang dengan server asal setelah masa berlakunya berakhir. Respons dengan perintah ini tidak akan disajikan 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

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

Anda juga dapat melihat rasio hit cache untuk rute tertentu di aplikasi web dengan Pemantauan Berbasis Rute.