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

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's จะปฏิบัติตามคำสั่งการควบคุมแคชต่อไปนี้

คำสั่ง คำขอ การตอบสนอง
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 จะไม่ใช้การเปลี่ยนรูปแบบใดๆ

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

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

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