จัดการการทำงานของแคช

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

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

อย่างไรก็ตาม เนื่องจากบริการ Cloud Functions และ Cloud Run สร้างเนื้อหาแบบไดนามิก เนื้อหาสำหรับ URL ที่กำหนดจึงอาจแตกต่างกันไปตามปัจจัยต่างๆ เช่น ข้อมูลจากผู้ใช้ หรือข้อมูลประจำตัวของผู้ใช้ ระบบจึงไม่ได้แคชคำขอที่ โค้ดแบ็กเอนด์จัดการไว้ใน CDN โดยค่าเริ่มต้น

แต่คุณสามารถกำหนดค่าลักษณะการทำงานของการแคชสำหรับเนื้อหาแบบไดนามิก ได้ ตัวอย่างเช่น หากฟังก์ชันสร้างเนื้อหาใหม่เป็นระยะๆ คุณสามารถเพิ่มความเร็วของแอปได้โดยการแคชเนื้อหาที่สร้างขึ้นเป็นระยะเวลาสั้นๆ อย่างน้อย

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

ข้อยกเว้นคือคำขอที่แสดงข้อผิดพลาด 404 CDN จะแคชการตอบกลับ 404 ของบริการสำหรับ URL ที่ไม่มีอยู่เป็นเวลา 10 นาที เพื่อให้คำขอ URL นั้นในภายหลังแสดงจาก CDN หากคุณเปลี่ยนบริการเพื่อให้เนื้อหาปรากฏใน URL นี้ CDN จะแสดงการตอบกลับ 404 ที่แคชไว้ต่อไปเป็นเวลา 10 นาที (อย่างมาก) แล้วจึงแสดงเนื้อหาจาก URL นั้นตามปกติ

หากการตอบกลับ 404 มีส่วนหัวการแคชที่ Cloud Functions หรือ Cloud Run บริการตั้งค่าไว้แล้ว ส่วนหัวเหล่านั้นจะลบล้างค่าเริ่มต้น 10 นาทีและกำหนดลักษณะการทำงานของการแคชของ CDN อย่างเต็มที่

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

ตั้งค่า Cache-Control

เครื่องมือหลักที่คุณใช้จัดการแคชสำหรับเนื้อหาแบบไดนามิกคือส่วนหัว Cache-Control การกำหนดค่าส่วนหัวนี้จะช่วยให้คุณแจ้งทั้งเบราว์เซอร์และ CDN ได้ว่าเนื้อหาจะแคชได้นานเท่าใด คุณตั้งค่า Cache-Control ในฟังก์ชันได้ดังนี้

res.set('Cache-Control', 'public, max-age=300, s-maxage=600');

ในส่วนหัวตัวอย่างนี้ Directive จะทำ 3 สิ่งต่อไปนี้

• public \- ทำเครื่องหมายการตอบกลับเป็น public ซึ่งหมายความว่าทั้งเบราว์เซอร์ และแคชระดับกลาง (รวมถึง CDN สำหรับ Firebase Hosting) สามารถ แคชเนื้อหาได้

• max-age \- ตั้งค่าจำนวนวินาทีที่การตอบกลับจะเก่าได้ก่อนที่จะต้องตรวจสอบซ้ำกับเซิร์ฟเวอร์ต้นทาง การตั้งค่านี้มีผลกับเบราว์เซอร์ และหากไม่มีส่วนหัว s-maxage ก็จะมีผลกับแคชอื่นๆ ทั้งหมด (รวมถึง CDN) ด้วย

• s-maxage \- ลบล้าง Directive max-age สำหรับแคชที่แชร์ (เช่น CDN) เมื่อ CDN พบการตอบกลับที่เก่ากว่า s-maxage วินาที CDN จะตรวจสอบซ้ำกับเซิร์ฟเวอร์ต้นทาง ในส่วนหัวตัวอย่าง เบราว์เซอร์สามารถแคชการตอบกลับได้ 5 นาที แต่ CDN และแคชระดับกลางอื่นๆ สามารถแคชได้ 10 นาที

สำหรับ max-age และ s-maxage ให้ตั้งค่าเป็นระยะเวลาที่นานที่สุดที่คุณยอมรับได้ว่าผู้ใช้จะได้รับเนื้อหาที่ไม่มีอัปเดต หากหน้าเว็บมีการเปลี่ยนแปลงทุกๆ 2-3 วินาที ให้ใช้ค่าเวลาที่น้อย แต่เนื้อหาประเภทอื่นๆ สามารถแคชได้อย่างปลอดภัยเป็นเวลาหลายชั่วโมง หลายวัน หรือแม้แต่หลายเดือน

หากต้องการป้องกันการแคชโดยสมบูรณ์ (เช่น เพื่อแสดงเนื้อหาคงที่เวอร์ชันล่าสุดเสมอ) คุณสามารถกำหนดค่านี้ใน firebase.json โดยใช้การตั้งค่า headers ดังนี้

"hosting": {
  // ...

  // Disables caching for the /posts route
  "headers": [ {
    // Change source to match your dynamically-rendered routes
    "source": "/posts/**",
    "headers": [ {
      "key": "Cache-Control",
      "value": "no-cache, no-store"
    } ]
  } ]
}

ดูข้อมูลเพิ่มเติมเกี่ยวกับส่วนหัว Cache-Control ได้ใน Mozilla Developer Network และใน เอกสารประกอบสำหรับนักพัฒนาเว็บของ Google

ระบบจะแสดงเนื้อหาที่แคชไว้เมื่อใด

เบราว์เซอร์และ CDN จะแคชเนื้อหาของคุณโดยอิงตามข้อมูลต่อไปนี้

• ชื่อโฮสต์
• เส้นทาง
• สตริงการค้นหา
• เนื้อหาของส่วนหัวคำขอที่ระบุไว้ในส่วนหัว Vary

ส่วนหัว Vary

ส่วนหัว Vary จะกำหนดส่วนหัวคำขอที่ควรใช้เพื่อแสดงการตอบกลับที่เหมาะสม (ไม่ว่าเนื้อหาที่แคชไว้จะถูกต้องหรือไม่ หรือควรตรวจสอบเนื้อหาซ้ำกับเซิร์ฟเวอร์ต้นทาง)

Firebase Hosting จะตั้งค่าส่วนหัว Vary ที่เหมาะสมในการตอบกลับของคุณสำหรับสถานการณ์ทั่วไปโดยอัตโนมัติ ส่วนใหญ่แล้วคุณไม่จำเป็นต้องกังวล เกี่ยวกับส่วนหัว Vary header. อย่างไรก็ตาม ในกรณีการใช้งานขั้นสูงบางกรณี คุณอาจมีส่วนหัวอื่นๆ ที่ต้องส่งผลต่อแคช ในกรณีดังกล่าว คุณสามารถตั้งค่าส่วนหัว Vary ในการตอบกลับได้ เช่น

res.set('Vary', 'Accept-Encoding, X-My-Custom-Header');

ในกรณีนี้ ค่าของส่วนหัว Vary คือ

vary: X-My-Custom-Header, x-fh-requested-host, accept-encoding, cookie, authorization

การตั้งค่าเหล่านี้จะทำให้ระบบแคชคำขอ 2 รายการที่เหมือนกันแต่มีส่วนหัว X-My-Custom-Header ที่แตกต่างกันแยกกัน โปรดทราบว่า Hosting จะเพิ่ม Cookie และ Authorization ลงในส่วนหัว Vary โดยค่าเริ่มต้นเมื่อมีการส่งคำขอเนื้อหาแบบไดนามิก ซึ่งจะช่วยให้ส่วนหัวการให้สิทธิ์ของเซสชันหรือคุกกี้ที่คุณใช้เป็นส่วนหนึ่งของคีย์แคช ซึ่งจะป้องกันการรั่วไหลของเนื้อหาโดยไม่ตั้งใจ

นอกจากนี้ โปรดทราบว่า

• ระบบจะแคชได้เฉพาะคำขอ GET และ HEAD เท่านั้น คำขอ HTTPS ที่ใช้วิธีอื่นๆ จะไม่ได้รับการแคช

• โปรดระมัดระวังเมื่อเพิ่มการตั้งค่าลงในส่วนหัว Vary ยิ่งคุณเพิ่มการตั้งค่ามากเท่าใด โอกาสที่ CDN จะแสดงเนื้อหาที่แคชไว้ได้ก็จะยิ่งน้อยลงเท่านั้น นอกจากนี้ โปรดทราบว่า Vary อิงตามส่วนหัวคำขอ ไม่ใช่ส่วนหัวการตอบกลับ

การใช้คุกกี้

เมื่อใช้ Firebase Hosting ร่วมกับ Cloud Functions หรือ Cloud Run โดยทั่วไปแล้วระบบจะนำคุกกี้ออกจากคำขอขาเข้า ซึ่งจำเป็นเพื่อให้ CDN มีลักษณะการทำงานของการแคชที่มีประสิทธิภาพ เฉพาะคุกกี้ __session ที่มีชื่อพิเศษเท่านั้นที่จะส่งผ่านไปยังการดำเนินการของแอปได้

เมื่อมีอยู่ ระบบจะทำให้คุกกี้ __session เป็นส่วนหนึ่งของคีย์แคชโดยอัตโนมัติ ซึ่งหมายความว่าผู้ใช้ 2 คนที่มีคุกกี้ต่างกันจะไม่ได้รับการตอบกลับที่แคชไว้ของอีกคน ใช้คุกกี้ __session ก็ต่อเมื่อแอปแสดงเนื้อหาที่แตกต่างกันโดยขึ้นอยู่กับการให้สิทธิ์ของผู้ใช้