กลยุทธ์การแคชที่ขอบเครือข่ายสำหรับแอปรีแอ็กต์

ส่วนหัวการตอบกลับ Cache-Control ควบคุมระยะเวลาที่ Cloudflare (และ CDN อื่น ๆ) จะแคชการตอบกลับ SSR ของคุณ คำสั่งสำคัญมีดังนี้: max-age (แคชของเบราว์เซอร์), s-maxage (ระยะเวลาของแคช CDN/แคชร่วม) และ stale-while-revalidate (แสดงเนื้อหาเก่าขณะที่ตรวจสอบความใหม่ในเบื้องหลัง)

s-maxage มีผลกับแคชร่วม (CDN) ขณะที่ max-age ใช้กับแคชของเบราว์เซอร์ สำหรับหน้า SSR โดยทั่วไปควรกำหนด s-maxage=60 (CDN แคชเป็นเวลา 60 วินาที) และ max-age=0 (เบราว์เซอร์ตรวจสอบความใหม่ทุกครั้ง) เพื่อให้ผู้ใช้ทุกคนได้รับเนื้อหาที่ค่อนข้างใหม่จากแคชที่ขอบเครือข่าย

การเพิ่ม stale-while-revalidate=30 ลงในส่วนหัว Cache-Control จะบอก Cloudflare ให้แสดงหน้าที่แคชไว้ทันที ขณะเดียวกันก็ดึงเวอร์ชันใหม่ในเบื้องหลัง ผู้ใช้จะได้รับการตอบกลับที่รวดเร็วเสมอ โดยความเก่าสูงสุดคือ s-maxage + stale-while-revalidate วินาที

เนื้อหาเฉพาะบุคคล (อิงตามเซสชันผู้ใช้หรือภูมิภาคภาษา) ต้องไม่ถูกส่งจากแคชร่วมให้ผู้ใช้ผิดคน ส่วนหัว Vary: Cookie บอก Cloudflare ให้ถือว่าค่า Cookie ที่ไม่ซ้ำกันแต่ละค่าเป็นรายการแคชแยกกัน จึงป้องกันไม่ให้ข้อมูลของผู้ใช้คนหนึ่งถูกส่งให้ผู้ใช้อีกคน

รูปแบบที่ใช้กันทั่วไปคือ ตรวจสอบคุกกี้เซสชันใน Worker ก่อนตัดสินใจว่าจะใช้แคชหรือไม่ หากมีคุกกี้เซสชัน ให้ข้ามแคชทั้งหมดแล้วเรนเดอร์การตอบกลับเฉพาะบุคคล หากไม่มีคุกกี้เซสชัน หน้านั้นเป็นหน้าสาธารณะและสามารถส่งจากแคชได้

Cloudflare KV คือที่เก็บคีย์-ค่าที่กระจายไปทั่วโลก ซึ่งจัดเก็บข้อมูลไว้ใกล้ผู้ใช้ คุณสามารถแคช HTML ที่เรนเดอร์แล้วไว้ใน KV ได้ โดยจัดเก็บหน้าที่เรนเดอร์แล้วเป็นค่า พร้อมกำหนด TTL จากนั้นคำขอในอนาคตจะอ่านข้อมูลจาก KV ที่ขอบเครือข่ายแทนการเรนเดอร์ด้วย React ใหม่

การอ่านจาก KV ทำได้รวดเร็ว เพราะข้อมูลถูกจำลองไปยัง PoP ที่ขอบเครือข่ายซึ่งให้บริการคำขอ โดยเวลาแฝงของการอ่านโดยทั่วไปต่ำกว่า 5ms อย่างไรก็ตาม การเขียนลง KV ใช้ความสอดคล้องในที่สุด: การเขียนในภูมิภาคหนึ่งจะเผยแพร่ไปยัง PoP ทั่วโลกทั้งหมดภายใน 60 วินาที ซึ่งหมายความว่าผู้ใช้บางรายอาจเห็นข้อมูลเก่าอยู่ชั่วขณะ

Cloudflare R2 คือบริการที่เก็บอ็อบเจ็กต์ที่เข้ากันได้กับ S3 และไม่มีค่าธรรมเนียมการส่งข้อมูลออก เหมาะสำหรับทรัพยากรขนาดใหญ่ที่ไม่เหมาะจะเก็บใน KV เช่น โมดูล WASM ภาพ OG ที่เรนเดอร์ไว้ล่วงหน้า และชุดข้อมูล JSON ขนาดใหญ่ Workers เข้าถึง R2 ผ่านการผูกทรัพยากรได้เช่นเดียวกับ KV

Cloudflare Enterprise รองรับแท็กแคช โดยคุณติดแท็กการตอบกลับด้วย Cache-Tag: product-42 และเมื่อผลิตภัณฑ์หมายเลข 42 เปลี่ยนแปลง คุณก็เรียก API ของ Cloudflare เพื่อล้างการตอบกลับทั้งหมดที่ติดแท็ก product-42 ได้ วิธีนี้ทำให้ล้างแคชเฉพาะจุดได้โดยไม่ต้องล้างแคชทั้งหมด

เมื่อคุณปรับใช้ Worker เวอร์ชันใหม่ HTML ที่แคชไว้อาจอ้างอิงชื่อไฟล์บันเดิล JS เก่า กลยุทธ์ที่รัดกุมคือใส่เวอร์ชันของการปรับใช้ไว้ในคีย์แคช หรือใช้ชื่อไฟล์บันเดิลที่มีเวอร์ชัน (ผ่านการทำแฮชเนื้อหาของ Vite) เพื่อให้ HTML เก่าอ้างอิงไฟล์ JS ที่ถูกต้องและมีอยู่ในแคชเสมอ

Worker ที่แคช HTML ของ SSR ไว้ใน KV จะทำตามรูปแบบนี้: คำนวณคีย์แคชจาก URL (และการตั้งค่าภาษาหากต้องการ) ตรวจสอบว่า KV มีข้อมูลหรือไม่ และส่ง HTML ที่แคชไว้กลับทันทีหากพบข้อมูล หากไม่พบ ให้เรนเดอร์ด้วย React จัดเก็บผลลัพธ์ไว้ใน KV พร้อม TTL แล้วส่ง HTML ที่เพิ่งเรนเดอร์กลับไป

Cloudflare KV ใช้โมเดลความสอดคล้องแบบใดสำหรับการเขียน

การแคชที่ขอบเครือข่ายสำหรับแอป React ใช้หลายกลยุทธ์ร่วมกัน ได้แก่ s-maxage ของ Cache-Control สำหรับแคชหน้าสาธารณะบน CDN, Vary: Cookie เพื่อป้องกันไม่ให้มีการแชร์การตอบกลับเฉพาะบุคคล, KV สำหรับ HTML ที่เรนเดอร์แล้วและแคชไว้ที่ขอบเครือข่าย และแท็กแคชสำหรับการล้างแคชอย่างละเอียด โมเดลความสอดคล้องในที่สุดของ KV หมายความว่าการเผยแพร่การเขียนอาจใช้เวลาสูงสุด 60 วินาที ดังนั้นควรออกแบบ TTL และกลยุทธ์การล้างแคชให้เหมาะสม