Caching คืออะไร? คู่มือภาษาง่ายสำหรับผู้สร้างแอป

Caching คือการเก็บสำเนาที่พร้อมใช้ของสิ่งที่ใช้เวลานานหรือมีต้นทุนสูงในการดึงมา เพื่อให้คำขอถัดไปสำหรับสิ่งนั้นตอบได้อย่างรวดเร็วจากสำเนาที่เก็บไว้ สำเนาที่บันทึกไว้เรียกว่า cache เบราว์เซอร์ของคุณ cache รูปภาพเพื่อให้เว็บโหลดเร็วขึ้นในการเข้าชมครั้งที่สอง ส่วนเซิร์ฟเวอร์ cache ผลลัพธ์ของคิวรีฐานข้อมูลที่ช้า เพื่อไม่ต้องรันคิวรีนั้นทุกครั้งที่มีผู้เข้าชม

Caching ทำให้แอปเร็วขึ้นและรันได้ถูกลง ข้อแลกเปลี่ยนสำคัญอย่างเดียวคือสำเนาอาจล้าสมัยได้

ทำไม caching จึงสำคัญเมื่อสร้างแอปด้วย AI

คุณจะพบ caching ในแอปที่สร้างด้วย AI ใน 3 รูปแบบ:

• "ฉันอัปเดตแอปแล้วแต่ยังเห็นเวอร์ชันเก่า" นี่คือสถานการณ์ caching ที่พบบ่อยที่สุด และมักไม่เป็นอันตราย เบราว์เซอร์หรือ CDN กำลังแสดงสำเนาที่บันทึกไว้
• ความเร็ว หากหน้าช้าเพราะต้องคำนวณตัวเลขเดิมซ้ำให้ผู้เยี่ยมชมทุกคน การ cache ผลลัพธ์ก็ทำให้รู้สึกทันทีได้
• ค่าใช้จ่าย ตัวสร้างแอปด้วย AI และโฮสต์หลายแห่งคิดค่าการประมวลผล เวลาฐานข้อมูล และการเรียก API ภายนอก หากผู้เยี่ยมชมหนึ่งพันคนกระตุ้นคำขอที่มีต้นทุนสูงเดียวกัน caching ช่วยให้คุณจ่ายเพียงครั้งเดียว

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

ตัวอย่างเปรียบเทียบในชีวิตประจำวัน

ลองนึกภาพครัวของร้านกาแฟที่คนเยอะ

ทุกเช้า พ่อครัวสามารถชงกาแฟแต่ละแก้วจากเมล็ดที่เพิ่งบดเมื่อมีคนสั่ง ซึ่งช้า ดังนั้นเขาจึงเตรียมหม้อกาแฟกรองไว้บนเครื่องอุ่น ลูกค้าส่วนใหญ่ได้กาแฟในไม่กี่วินาที นั่นคือ cache hit เมื่อกาแฟในหม้อหมด ต้องชงใหม่ นั่นคือ cache miss

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

Cache อยู่ที่ไหนบ้าง

การโหลดหน้าเว็บหนึ่งครั้งอาจผ่าน cache หลายชั้น จากที่ใกล้ผู้ใช้ที่สุดไปจนไกลที่สุด:

CDN (content delivery network) คือเครือข่าย cache ทั่วโลกสำหรับไฟล์ของเว็บไซต์คุณ

Cache ตัดสินใจว่าจะเก็บอะไร

ทุก cache ต้องตอบคำถามเดียวกันเหล่านี้:

• อะไรสามารถ cache ได้? ข้อมูลสาธารณะที่ใช้ร่วมกัน (รูปสินค้า โพสต์บล็อก) ได้ ข้อมูลส่วนตัว (หน้าบัญชีของผู้ใช้ ข้อความของเขา) ห้าม cache ใน shared cache
• นานเท่าไร? นี่คือ TTL (time to live) โลโก้อาจถูก cache ไว้หนึ่งปี ส่วนจำนวนสินค้าคงคลังอาจถูก cache ไว้ 30 วินาที
• อัปเดตอย่างไร? สำเนาหมดอายุแล้วดึงใหม่ หรือแอปลบสำเนาออกโดยตั้งใจเมื่อข้อมูลเปลี่ยน เรียกว่า invalidation

สำหรับเว็บไซต์ เซิร์ฟเวอร์จะบอกเบราว์เซอร์และ CDN ว่าจะ cache ไฟล์แต่ละไฟล์อย่างไร โดยใช้ header Cache-Control ตัวอย่างเช่น Cache-Control: max-age=3600 หมายถึง "ใช้สำเนานี้ซ้ำได้หนึ่งชั่วโมง"

เครื่องมือ build สมัยใหม่จัดการส่วนที่ยากที่สุดของไฟล์สแตติกด้วย cache busting: ทุกครั้งที่ไฟล์เปลี่ยน ไฟล์จะได้ชื่อใหม่พร้อมลายนิ้วมือ เช่น app.3f9a2c.js เบราว์เซอร์สามารถ cache ชื่อเก่าไว้นานได้ เพราะเวอร์ชันใหม่มีชื่อต่างออกไป

ตัวอย่างการทำงาน: แคตตาล็อกสินค้า

คุณมีร้านค้าออนไลน์ขนาดเล็ก หน้าแรกแสดงสินค้า 50 รายการพร้อมราคาและจำนวนคงคลังจากฐานข้อมูล และมีรายการ "ยอดนิยม" ที่ต้องคำนวณข้ามคำสั่งซื้อทั้งหมดซึ่งช้า

1. รูปภาพและสคริปต์ ถูก cache โดยเบราว์เซอร์และ CDN เป็นเวลานาน แต่ละ build ใหม่ทำให้ไฟล์ที่เปลี่ยนมีชื่อใหม่ การอัปเดตจึงยังปรากฏ
2. รายการยอดนิยม คำนวณทุก 10 นาทีและเก็บใน application cache ผู้เยี่ยมชมทุกคนในช่วง 10 นาทีนั้นได้ผลลัพธ์ที่บันทึกไว้ทันที
3. ราคา ถูก cache ไว้ระยะสั้น และล้าง cache ทุกครั้งที่คุณแก้ไขสินค้า ทำให้ลูกค้าไม่เห็นราคาเก่านาน
4. สต็อกตอนชำระเงิน ไม่ถูก cache เลย เมื่อมีคนกด "ซื้อ" แอปจะตรวจฐานข้อมูลจริง จึงไม่สามารถขายสินค้าที่เพิ่งหมดได้
5. หน้าตะกร้าและบัญชี ไม่ถูกเก็บใน shared cache เลย เพราะเป็นข้อมูลส่วนบุคคล

ผลลัพธ์คือ หน้าแรกเร็ว ฐานข้อมูลทำงานน้อยลงมาก และไม่มีสิ่งใดที่เกี่ยวกับเงินหรือความเป็นส่วนตัวที่ล้าสมัย

คำศัพท์สำคัญ

ความเข้าใจผิดที่พบบ่อย

• "Caching ดีเสมอ" การ cache สิ่งที่ผิดก่อให้เกิดบั๊กจริง เช่น ราคาเก่า โพสต์ใหม่ที่ไม่ขึ้น หรือกรณีที่แย่ที่สุด คือหน้าส่วนตัวของผู้ใช้คนหนึ่งไปแสดงให้อีกคน ควร cache อย่างจงใจ
• "ถ้าเห็นเวอร์ชันเก่า แสดงว่าการอัปเดตล้มเหลว" โดยมากไม่ใช่ ลองรีเฟรชแบบเต็ม (Ctrl+Shift+R หรือ Cmd+Shift+R บน Mac) หรือเปิดหน้าต่างส่วนตัวก่อนจะสรุปว่ามีอะไรเสีย
• "Caching แก้แอปที่ช้าได้" มันซ่อนความช้าสำหรับคำขอที่ซ้ำกัน คำขอแรกยังช้าอยู่ และถ้าปัญหาเบื้องหลังคือการขาด index ในฐานข้อมูล ก็ต้องแก้ตรงนั้นด้วย
• "ควร cache ทุกอย่างให้นานที่สุดเท่าที่จะทำได้" เวลา cache ที่ยาวเหมาะกับไฟล์ที่ได้ชื่อใหม่เมื่อเปลี่ยน สำหรับหน้า HTML และข้อมูล ระยะเวลาที่สั้นกว่าปลอดภัยกว่า
• "ล้าง cache ของฉันแก้ได้สำหรับทุกคน" มันล้างเฉพาะเบราว์เซอร์ ของคุณ ผู้เยี่ยมชมและ cache ของ CDN ยังมีสำเนาของตัวเอง

สิ่งที่ควรขอจากตัวสร้างแอปด้วย AI ของคุณ

• "ส่วนไหนของแอปนี้ช้า และส่วนไหนสามารถ cache ได้อย่างปลอดภัย"
• "Cache [รายการยอดนิยม / ผลลัพธ์ API] ไว้ [N] นาที และล้างเมื่อข้อมูลต้นทางเปลี่ยน"
• "ตรวจให้แน่ใจว่าหน้าที่มีข้อมูลส่วนบุคคลหรือบัญชีไม่สามารถถูก cache โดย CDN หรือ shared cache ได้"
• "ตั้งเวลา cache ที่ยาวสำหรับไฟล์สแตติกที่มีลายนิ้วมือ และสั้นสำหรับ HTML"
• "Cache การตอบกลับจาก [API ภายนอก] เพื่อไม่ให้เรียกทุกครั้งที่โหลดหน้า และบอกฉันว่าข้อมูลอาจล้าสมัยได้มากแค่ไหน"
• "หลังเผยแพร่ฉันเห็นเวอร์ชันเก่า เป็น browser cache ของฉัน หรือมีบางอย่างยังไม่ได้ deploy"

Caching ใน Mythex

หลังเผยแพร่การอัปเดตของแอป Mythex เอกสารระบุว่า CDN cache อาจล่าช้าไปชั่วครู่ และการรีเฟรชแบบเต็มของ URL สาธารณะจะแสดงเวอร์ชันใหม่ ดู วิธีเผยแพร่ หน้าขีดจำกัดการโฮสต์ ยังแนะนำให้ cache ไฟล์สแตติก เพราะการโฮสต์ เวลาฐานข้อมูล และแบนด์วิดท์ถูกหักจากยอดเครดิตของคุณ นอกเหนือจากนั้น เช่น การ cache ผลลัพธ์คิวรีหรือการตอบกลับ API เป็นสิ่งที่คุณขอให้เอเจนต์สร้างเข้าไปในแอป

บทความที่เกี่ยวข้อง: CDN คืออะไร, วิธีทำให้เว็บไซต์เร็วขึ้น และrate limiting คืออะไร

คำถาม