วิธีแคชการตอบสนอง API + การแคชหน้าเว็บ

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

ตัวอย่างเช่น ในเว็บไซต์อีคอมเมิร์ซ เมื่อคุณคลิกที่สินค้าจากผลการค้นหา แล้วกดปุ่มย้อนกลับ

มันจะทำการค้นหาใหม่

การโหลดหน้าเดิมซ้ำนั้นไม่ดีต่อประสบการณ์การใช้งาน (UX) และยังเป็นปัญหาใหญ่ในเชิงระบบอีกด้วย

การโหลดหน้าซ้ำทำให้เกิดการเรียกใช้ API ที่ไม่จำเป็นและเพิ่มปริมาณการใช้งาน

อาจทำให้เกิดปัญหาเรื่องค่าใช้จ่าย และถ้าหากมีการเก็บรวบรวมข้อมูลบนหน้านั้น อาจทำให้เกิดปัญหาการเก็บรวบรวมข้อมูลซ้ำซ้อน

เพื่อแก้ปัญหานี้ การแคชหน้าเว็บหรือผลลัพธ์จาก API จะช่วยได้มาก

1. การใช้พื้นที่จัดเก็บของเบราว์เซอร์ (localStorage, SessionStorage, IndexedDB)

- localStorage จะเก็บข้อมูลไว้แม้ว่าจะปิดเบราว์เซอร์แล้วก็ตาม

- sessionStorage จะลบข้อมูลเมื่อปิดเบราว์เซอร์หรือแท็บ

- IndexedDB ใช้สำหรับเก็บข้อมูลขนาดใหญ่ สามารถเก็บข้อมูลแบบอะซิงโครนัส และเป็น NoSql สามารถเก็บรูปภาพหรือวิดีโอได้ ขนาดสูงสุดขึ้นอยู่กับเบราว์เซอร์ แต่โดยทั่วไปประมาณ 50mb สามารถใช้งานได้แม้ในโหมดออฟไลน์

2. Axios Interceptor

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

การแคชใน Nuxt Framework

คุณสามารถแคชคอมโพเนนต์ได้โดยการห่อคอมโพเนนต์ด้วยแท็ก keep-alive

คุณสามารถกำหนดได้ว่าจะเรียกใช้ fetch() ในระหว่างการเรนเดอร์ฝั่งเซิร์ฟเวอร์หรือไม่ ถ้าเป็น false จะเรียกใช้ fetch() ในฝั่งไคลเอนต์เท่านั้น

นอกจากนี้ยังสามารถใช้ Vuex ได้ หลักการทำงานเหมือนกับการใช้ browser storage

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

แต่การใช้แคชอาจทำให้การปรับใช้รีซอร์ส เช่น รูปภาพ ไม่ทันที ดังนั้นในกรณีเช่นนี้ คุณต้องล้างแคช เช่น การเปลี่ยนชื่อไฟล์ การส่งคำขอเพื่อล้างแคช หรือถ้าคุณใช้ AWS CloudFront คุณสามารถใช้ฟังก์ชันล้างแคชได้

ยังมีวิธีการอื่นๆ คือการบันทึกหน้าเว็บที่เรนเดอร์โดย Nuxt Server ลงในแคชหน่วยความจำ

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

ถ้ามีผู้ใช้ 10,000 คนขอหน้าเดียวกัน

เมื่อผู้ใช้คนแรกขอ หน้าจะเรนเดอร์และถูกแคช

ผู้ใช้ที่เหลืออีก 9,999 คน เมื่อเข้าถึงหน้าเดียวกัน เซิร์ฟเวอร์จะส่งคืนผลลัพธ์จากแคช

-> วิธีนี้ไม่เหมาะสมหากคุณต้องแสดงข้อมูลที่แตกต่างกันไปตามแต่ละผู้ใช้

+ cache ใช้แพคเกจ lru-cache ภายใน

* lru : อัลกอริทึมการแคชที่ลบข้อมูลที่ไม่ได้ใช้งานมานานที่สุดก่อน

ใช้โครงสร้างข้อมูล hash map หรือ doubly linked list เพื่อค้นหาคีย์-ค่าได้อย่างรวดเร็ว: ความซับซ้อนของเวลา O(1)