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

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

SSR ของ Angular ไม่ได้ตั้งค่าคำสั่งแคชควบคุมที่ชัดเจนตั้งแต่แกะกล่อง คุณเพิ่มส่วนหัวได้โดยระบุส่วนหัว 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 จะไม่ใช้การเปลี่ยนรูปแบบใดๆ

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

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

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