แนวคิดหลักของ SWR: เก่าแต่ตรวจสอบใหม่

SWR ย่อมาจาก Stale-While-Revalidate ซึ่งเป็นกลยุทธ์แคช HTTP ที่กำหนดไว้ใน RFC 5861 กลยุทธ์นี้คือให้ส่งข้อมูลเก่าที่แคชไว้ให้ผู้ใช้ทันที จากนั้นตรวจสอบข้อมูลใหม่เบื้องหลัง และอัปเดตส่วนติดต่อผู้ใช้เมื่อข้อมูลล่าสุดมาถึง

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

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

ทำให้แอปพลิเคชันรู้สึกเร็วขึ้นอย่างเห็นได้ชัด และลดการรบกวนทางความคิดจากสถานะการโหลด

SWR จะตรวจสอบข้อมูลใหม่โดยอัตโนมัติเมื่อ: หน้าต่างเบราว์เซอร์กลับมาอยู่ในโฟกัส (ผู้ใช้สลับแท็บแล้วกลับมา) การเชื่อมต่อเครือข่ายกลับมาใช้งานได้หลังออฟไลน์ มีการเรียกใช้ mutate() อย่างชัดเจน หรือเวลาของตัวจับ refreshInterval ที่กำหนดค่าได้หมดลง

ตัวกระตุ้นอัตโนมัติเหล่านี้ช่วยให้ข้อมูลเป็นปัจจุบันโดยไม่ต้องให้นักพัฒนาจัดการตรรกะการดึงข้อมูลใหม่ด้วยตนเอง

คีย์ของ SWR สามารถอยู่ในสถานะใดสถานะหนึ่งจากหลายสถานะ ได้แก่ กำลังโหลด (ยังไม่มีข้อมูลแคชและกำลังดึงข้อมูลครั้งแรก) กำลังตรวจสอบข้อมูลใหม่ (มีข้อมูลแคชและกำลังรีเฟรชเบื้องหลัง) เกิดข้อผิดพลาด (คำขอล้มเหลว) หรือสำเร็จ (มีข้อมูลล่าสุดพร้อมใช้งาน)

การเข้าใจสถานะเหล่านี้ช่วยให้คุณสร้างโครงร่างขณะโหลดและส่วนติดต่อผู้ใช้สำหรับข้อผิดพลาดได้อย่างถูกต้อง

SWR จะรักษาแคชในหน่วยความจำส่วนกลาง โดยใช้คีย์คำขอเป็นคีย์ของแคช (โดยทั่วไปคือสตริง URL) คอมโพเนนต์ใดก็ตามที่ขอคีย์เดียวกันจะได้รับค่าที่แคชไว้เดียวกันและมีส่วนร่วมในรอบการตรวจสอบข้อมูลใหม่เดียวกัน

การขจัดคำขอซ้ำโดยอัตโนมัตินี้หมายความว่าคอมโพเนนต์ 10 รายการสามารถเรียกใช้ useSWR ด้วยคีย์เดียวกันได้ และจะมีคำขอเครือข่ายเพียงรายการเดียวเท่านั้น

SWR แยกตรรกะการจัดการแคชออกจากการดึงข้อมูลจริง คุณจะระบุฟังก์ชันดึงข้อมูล ซึ่งเป็นฟังก์ชัน async ที่รับคีย์และส่งคืนข้อมูล

ฟังก์ชันดึงข้อมูลนี้สามารถสลับเปลี่ยนได้ คุณสามารถใช้ fetch, axios, graphql-request หรือแหล่งข้อมูล async ใดก็ได้ SWR จะจัดการการแคชและการตรวจสอบข้อมูลใหม่โดยไม่ขึ้นอยู่กับวิธีการทำงานของฟังก์ชันดึงข้อมูล

ครอบแอปของคุณด้วย SWRConfig โดยให้พร็อพเพอร์ตี value มีฟังก์ชันดึงข้อมูล: value={{ fetcher: (url) => fetch(url).then(r => r.json()) }} การเรียกใช้ useSWR ทุกครั้งที่ไม่ระบุอาร์กิวเมนต์ฟังก์ชันดึงข้อมูลจะใช้ค่าเริ่มต้นส่วนกลางนี้

การทำเช่นนี้รวมการตั้งค่า API (URL พื้นฐานและส่วนหัวการยืนยันตัวตน) ไว้ในที่เดียว โดยไม่ต้องเขียนซ้ำในการเรียกใช้ฮุกแต่ละครั้ง

รูปแบบดั้งเดิมใช้ useEffect + useState เพื่อจัดการสถานะการโหลด ข้อมูล และข้อผิดพลาดด้วยตนเอง SWR แทนที่ทั้งหมดด้วยการเรียกใช้ฮุกเพียงครั้งเดียว ซึ่งจัดการการแคช การขจัดคำขอซ้ำ การรีเฟรชเบื้องหลัง และการลองส่งคำขอใหม่เมื่อเกิดข้อผิดพลาดโดยอัตโนมัติ

ปริมาณโค้ดที่ลดลงมีมาก คอมโพเนนต์ดึงข้อมูลทั่วไปลดจากมากกว่า 20 บรรทัดเหลือเพียง 3 บรรทัด

คีย์จะระบุคำขอหนึ่งรายการโดยไม่ซ้ำกัน ใช้สตริง URL ในกรณีง่าย ๆ สำหรับคำขอที่มีพารามิเตอร์ ให้ใช้คีย์แบบอาร์เรย์: [url, params] โดย params ต้องเป็นออบเจ็กต์หรือสตริงที่คงที่ ส่วน null จะปิดใช้งานคำขอ

การออกแบบคีย์ที่ดีช่วยให้คำขอที่เกี่ยวข้องใช้รายการแคชร่วมกัน และป้องกันไม่ให้คำขอที่ไม่เกี่ยวข้องใช้คีย์ชนกัน

SWR จัดการการตรวจสอบข้อมูลใหม่อย่างชาญฉลาด โดย dedupingInterval (ค่าเริ่มต้น 2 วินาที) จะป้องกันไม่ให้มีการตรวจสอบข้อมูลใหม่หลายครั้งเริ่มทำงานพร้อมกันเมื่อมีคอมโพเนนต์จำนวนมากถูกเมานต์ในเวลาเดียวกัน ภายในช่วงเวลาขจัดคำขอซ้ำ จะมีคำขอเพียงรายการเดียวต่อคีย์

วิธีนี้ป้องกันปัญหาคำขอถล่มพร้อมกัน ซึ่งมักเกิดในโครงสร้างต้นไม้ของคอมโพเนนต์ขนาดใหญ่ที่คอมโพเนนต์จำนวนมากดึงข้อมูลเดียวกัน

SWR สร้างโดย Vercel บริษัทผู้อยู่เบื้องหลัง Next.js และการผสานรวมก็ทำได้อย่างราบรื่น getServerSideProps หรือ getStaticProps สามารถดึงข้อมูลล่วงหน้าได้ และ SWR จะเติมข้อมูลเริ่มต้นจากค่าที่ดึงล่วงหน้านั้นบนไคลเอ็นต์

ทำให้คุณได้ HTML เริ่มต้นที่เรนเดอร์จากเซิร์ฟเวอร์ พร้อมการตรวจสอบข้อมูลใหม่ฝั่งไคลเอ็นต์โดยอัตโนมัติเมื่อเมานต์ ซึ่งรวมข้อดีของ SSR และ SWR ไว้ด้วยกัน

ข้อใดต่อไปนี้เป็นสิ่งที่ NOT ทำให้ SWR ตรวจสอบข้อมูลใหม่ตามค่าเริ่มต้น

SWR ใช้กลยุทธ์ Stale-While-Revalidate โดยส่งข้อมูลที่แคชไว้ให้ทันที ตรวจสอบข้อมูลใหม่เบื้องหลัง และอัปเดตส่วนติดต่อผู้ใช้เมื่อข้อมูลล่าสุดมาถึง โดยจะเริ่มตรวจสอบข้อมูลใหม่เมื่อกลับมาโฟกัส เชื่อมต่อเครือข่ายอีกครั้ง เรียกใช้ mutate และดึงข้อมูลเป็นระยะ แคชส่วนกลางจะขจัดคำขอซ้ำระหว่างคอมโพเนนต์ และฟังก์ชันดึงข้อมูลสามารถสลับเปลี่ยนได้อย่างสมบูรณ์

โมเดลนี้ช่วยลดความซับซ้อนของโค้ดดึงข้อมูลลงอย่างมาก พร้อมทำให้ผู้ใช้รับรู้ว่าแอปทำงานเร็วขึ้น