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

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

  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

SSR ของ Angular ไม่ได้ตั้งค่าคำสั่ง Cache-Control ที่ชัดเจนตั้งแต่แรก คุณเพิ่มได้โดยระบุส่วนหัว 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 จะได้รับการแคชเป็นเวลาไม่เกิน SECONDS ที่กําหนด
s-maxage=SECONDS ไม่มี การตอบกลับที่มีคําสั่ง s-maxage จะได้รับการแคชเป็นเวลาไม่เกิน SECONDS ที่กําหนด หากมีทั้ง max-age และ s-maxage Cloud CDN จะใช้ s‑maxage การตอบกลับที่มีคำสั่งนี้จะไม่แสดงข้อมูลที่ล้าสมัย 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 จะไม่ใช้การเปลี่ยนรูปแบบใดๆ

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

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

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