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

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

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

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

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