แคชเนื้อหาแอป

Cloud CDN เป็นส่วนสำคัญในการสนับสนุนเว็บแอปของคุณของ App Hosting ทุกคำขอที่ส่งไปยังแบ็กเอนด์จะผ่าน Cloud CDN ก่อน ระบบจะแสดงเนื้อหาที่แคชไว้ใน CDN ให้แก่ผู้ใช้ทันที โดยข้ามการเดินทางไปยังบริการ Cloud Run ที่เรียกใช้โค้ดเซิร์ฟเวอร์ของเว็บแอป ดูข้อมูลเพิ่มเติมเกี่ยวกับประโยชน์ทั่วไปของ CDN ได้ที่ web.dev

แม้ว่าการกำหนดค่า Cloud CDN พื้นฐานจะตั้งค่าโดย App Hosting และไม่สามารถแก้ไขได้ แต่คุณสามารถทำสิ่งต่างๆ เพื่อเพิ่มประสิทธิภาพการแคชเพื่อเพิ่มความเร็วในการโหลดหน้าเว็บ ลดเนื้อหาที่ไม่ได้แคชที่เรียกเก็บเงิน และลดการเข้าชม Cloud Run

เนื้อหาที่แคชได้

Cloud CDN จะจัดเก็บการตอบกลับไว้ในแคชหากเงื่อนไขต่อไปนี้ทั้งหมดเป็นจริง

  1. คำขอเป็น GET

  2. การตอบกลับมีรหัสสถานะเป็น 200, 203, 204, 206, 300, 301, 302, 307, 308, 404, 405, 410, 421, 451 หรือ 501

  3. การตอบกลับมีส่วนหัว Cache-Control ที่มีคำสั่ง max-age หรือ s-maxage หรือส่วนหัว Expires ที่มีการประทับเวลาในอนาคต

  4. การตอบกลับมีส่วนหัว Age หรือส่วนหัว Cache-Control ที่มีคำสั่ง public ที่ชัดเจน

  5. การตอบกลับมีขนาดน้อยกว่าหรือเท่ากับ 10 MiB

และไม่มีข้อใดต่อไปนี้เป็นจริง

  1. การตอบกลับมีส่วนหัว Set-Cookie

  2. การตอบกลับมีส่วนหัว Vary ที่มีค่าอื่นที่ไม่ใช่ 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 หรือ Next-Url

  3. การตอบกลับมีส่วนหัว Cache-Control ที่มีคำสั่ง no-store หรือ private

  4. คำขอมีส่วนหัว Cache-Control ที่มีคำสั่ง no-store

  5. คำขอมีส่วนหัว Authorization เว้นแต่การตอบกลับจะมีคำสั่งควบคุมแคชที่ชัดเจน

ปรับแต่งลักษณะการทำงานด้วยคำสั่งควบคุมแคช

Next.js

Next.js จะตั้งค่าคำสั่งการควบคุมแคชโดยนัยตามปัจจัยหลายประการ อย่างไรก็ตาม คุณสามารถลบล้างการตั้งค่าเหล่านี้ได้โดยตั้งค่าส่วนหัวในไฟล์ next.config.js ด้วยตนเอง ตัวอย่างเช่น หากต้องการตรวจสอบว่าหน้าเว็บไม่ได้แคชไว้ใน Cloud CDN ให้ทำดังนี้

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

Angular

Angular SSR ไม่ได้ตั้งค่าคำสั่งการควบคุมแคชที่ชัดเจนตั้งแต่แกะกล่อง คุณสามารถเพิ่มส่วนหัวของคุณเองได้โดยระบุส่วนหัว cache-control ในเส้นทางเซิร์ฟเวอร์ ตัวอย่างเช่น หากต้องการอนุญาตให้ Cloud CDN แคชหน้าเว็บทั้งหมดเป็นเวลา 1 ชั่วโมง ให้ทำดังนี้

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

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

หรือหากต้องการตรวจสอบว่าหน้าเว็บหนึ่งๆ จะไม่ได้รับการแคช ให้ทำดังนี้

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

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

คำสั่งตามที่กำหนด

อินสแตนซ์ Cloud CDN ของ Firebase App Hosting จะยึดตามคำสั่งการควบคุมแคชต่อไปนี้

คำสั่ง คำขอ การตอบสนอง
no-store เมื่อมีอยู่ในคำขอ ระบบจะไม่แคชการตอบกลับ ระบบจะไม่แคชการตอบกลับที่มี no-store
no-cache ระบบจะไม่สนใจคำสั่งคำขอ no-cache เพื่อป้องกันไม่ให้ไคลเอ็นต์เริ่มหรือบังคับให้ตรวจสอบความถูกต้องอีกครั้งกับต้นทาง การตอบกลับที่มี no-cache จะได้รับการแคช แต่ต้องตรวจสอบความถูกต้องอีกครั้งกับต้นทางก่อนแสดง
public ไม่มี คำสั่งนี้ไม่จำเป็นสำหรับการแคช แต่แนวทางปฏิบัติแนะนำคือให้รวมคำสั่งนี้ไว้สำหรับเนื้อหาที่พร็อกซีควรแคช
private ไม่มี Cloud CDN จะไม่แคชการตอบกลับที่มีคำสั่ง private แม้ว่าการตอบกลับจะถือว่าแคชได้ก็ตาม ไคลเอ็นต์ (เช่น เบราว์เซอร์) อาจยังคงแคชผลลัพธ์ไว้ ใช้ no-store เพื่อป้องกันการแคชการตอบกลับทั้งหมด
max-age=SECONDS ระบบละเว้นคำสั่งคำขอ max-age ระบบจะแสดงการตอบกลับที่แคชไว้เสมือนว่าไม่มีส่วนหัวนี้รวมอยู่ในคำขอ การตอบกลับที่มีคำสั่ง max-age จะได้รับการแคชไว้จนถึงจำนวนวินาทีที่กำหนด
s-maxage=SECONDS ไม่มี การตอบกลับที่มีคำสั่ง s-maxage จะได้รับการแคชไว้จนถึงจำนวนวินาทีที่กำหนด หากมีทั้ง max-age และ s-maxage ระบบจะใช้ s‑maxage โดย Cloud CDN การตอบกลับที่มีคำสั่งนี้จะไม่แสดงเนื้อหาที่ไม่มีการอัปเดต s-max-age (ขีดกลาง 2 ขีด) ไม่ถูกต้องสำหรับการแคช
max-stale=SECONDS คำสั่งคำขอ max-stale จะกำหนดความเก่าสูงสุด (เป็นวินาที) ที่ไคลเอ็นต์ยินดีจะยอมรับ Cloud CDN จะปฏิบัติตามคำสั่งนี้ และแสดงผลการตอบกลับที่แคชไว้ซึ่งล้าสมัยเฉพาะในกรณีที่ความล้าสมัยของการตอบกลับน้อยกว่าคำสั่ง max-stale ไม่เช่นนั้น ระบบจะตรวจสอบอีกครั้งก่อนแสดงผลตามคำขอ ไม่มี
stale-while-revalidate=SECONDS ไม่มี ระบบจะแสดงการตอบกลับที่มี stale-while-revalidate แก่ไคลเอ็นต์เป็นเวลาสูงสุด SECONDS ขณะที่การตรวจสอบซ้ำเกิดขึ้นแบบอะซิงโครนัส
must-revalidate ไม่มี การตอบกลับที่มี must-revalidate จะได้รับการตรวจสอบอีกครั้งกับเซิร์ฟเวอร์ต้นทางหลังจากหมดอายุ การตอบกลับที่มีคำสั่งนี้จะไม่แสดงเนื้อหาที่ไม่มีการอัปเดต
proxy-revalidate การตอบกลับที่มี proxy-revalidate จะได้รับการตรวจสอบอีกครั้งกับเซิร์ฟเวอร์ต้นทางหลังจากหมดอายุ การตอบกลับที่มีคำสั่งนี้จะไม่แสดงเนื้อหาที่ไม่มีการอัปเดต
no-transform ไม่มี Cloud CDN จะไม่ใช้การเปลี่ยนรูปแบบ

วัดการเข้าชมที่แคชและไม่ได้แคช

ในแท็บ App Hosting > การใช้งานในคอนโซล Firebase กราฟ "Cloud CDN - แบนด์วิดท์ขาออก" จะแสดงไบต์ที่แคชและไม่ได้แคชที่แสดง และมีเครื่องหมายสำหรับการเปิดตัวแต่ละครั้ง คุณใช้กราฟนี้เพื่อวัดประสิทธิภาพของการเพิ่มประสิทธิภาพแคชได้

นอกจากนี้ คุณยังดูอัตราการพบแคชสำหรับเส้นทางที่เฉพาะเจาะจงในเว็บแอปได้ด้วยการตรวจสอบตามเส้นทาง