SWR เทียบกับ React Query: การเลือกเครื่องมือที่เหมาะสม

SWR มีขนาดประมาณ 7 กิโลไบต์เมื่อบีบอัดด้วย gzip ส่วน React Query v5 มีขนาดประมาณ 13 กิโลไบต์เมื่อบีบอัดด้วย gzip ความแตกต่างนี้สะท้อนฟีเจอร์เพิ่มเติมของ React Query ได้แก่ การดึงคิวรีล่วงหน้า การยกเลิกคิวรี วงจรชีวิตของคิวรีที่ละเอียดกว่า และ DevTools ในตัว

สำหรับแอปพลิเคชันที่ต้องควบคุมขนาด หรือรูปแบบการดึงข้อมูลแล้วแสดงผลแบบเรียบง่าย ขนาดที่เล็กกว่าของ SWR ถือเป็นข้อได้เปรียบที่มีความหมาย

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

เนื่องจาก Vercel เป็นผู้พัฒนา SWR จึงทำงานร่วมกับ Next.js ได้เป็นอย่างดี โดยเฉพาะการใช้ getServerSideProps หรือ getStaticProps เพื่อดึงข้อมูลล่วงหน้า แล้วตรวจสอบข้อมูลใหม่จากฝั่งไคลเอนต์ผ่าน fallback data

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

รูปแบบนี้เป็นแนวทางการดึงข้อมูลที่แนะนำสำหรับแอปพลิเคชัน Next.js Pages Router ที่ใช้ Vercel

React Query ให้การควบคุมวงจรชีวิตของคิวรีได้ละเอียดกว่า โดยสามารถกำหนด staleTime, gcTime (การเก็บกวาดหน่วยความจำ), refetchOnWindowFocus, จำนวนครั้งที่ลองใหม่ และความล่าช้าก่อนลองใหม่ได้แยกกัน ระบบการเปลี่ยนแปลงข้อมูลพร้อมการเรียกกลับ onSuccess, onError และ onSettled ก็มีความยืดหยุ่นสูง

React Query ยังรองรับการยกเลิกคิวรีผ่าน AbortSignal ซึ่งมีประโยชน์สำหรับส่วนติดต่อผู้ใช้ที่ค้นหาไปพร้อมกับการพิมพ์

useInfiniteQuery ของ React Query ที่ใช้ร่วมกับ getNextPageParam ถูกออกแบบมาโดยเฉพาะสำหรับรูปแบบการเลื่อนแบบไม่สิ้นสุดและการโหลดเพิ่มเติม ระบบจะจัดการตรรกะของตัวชี้หน้าข้อมูล พร้อมจัดเตรียมออบเจ็กต์ pages แบบแบนหรือแบบมีโครงสร้าง

SWR มี useSWRInfinite ซึ่งรองรับงานในลักษณะใกล้เคียงกัน แต่ API อยู่ในระดับล่างกว่าเล็กน้อย จึงต้องประกอบข้อมูลแต่ละหน้าด้วยตนเองมากกว่า

React Query รองรับการดึงคิวรีล่วงหน้าเมื่อวางเมาส์เหนือองค์ประกอบหรือเมื่อเปลี่ยนเส้นทาง ด้วย queryClient.prefetchQuery ข้อมูลจะอยู่ในแคชก่อนที่คอมโพเนนต์จะถูกเมานต์ ทำให้แสดงผลได้ทันที

SWR ไม่มี API สำหรับดึงข้อมูลล่วงหน้าในตัว นอกเหนือจากข้อมูลสำรองจาก SSR สำหรับการดึงข้อมูลล่วงหน้าเมื่อวางเมาส์ React Query จึงเป็นตัวเลือกที่ดีกว่า

React Query v5 ทำให้ API เรียบง่ายขึ้น โดยให้ useQuery คืนค่า isPending แทน isLoading รวมรูปแบบการอัปเดตแบบมองโลกในแง่ดีให้เป็นหนึ่งเดียว และปรับปรุงการอนุมานประเภทข้อมูลของ TypeScript API ใน v5 สะอาดและสอดคล้องกว่ารุ่นก่อนหน้า

หากกำลังประเมิน React Query ให้เริ่มเรียนรู้ v5 โดยตรง แทนการเรียนรู้ v4 แล้วค่อยย้ายรุ่น

SWR แชร์รายการแคชส่วนกลางระหว่างคอมโพเนนต์ต่าง ๆ ตามคีย์ โดยไม่ต้องกำหนดค่า provider ใด ๆ นอกเหนือจาก SWRConfig สำหรับค่าเริ่มต้น ส่วน React Query ต้องใช้ QueryClientProvider ร่วมกับอินสแตนซ์ของ QueryClient

สำหรับการสร้างต้นแบบอย่างรวดเร็วหรือแอปพลิเคชันเรียบง่าย แคชส่วนกลางแบบไม่ต้องกำหนดค่าของ SWR ช่วยให้เริ่มต้นได้เร็วกว่า ส่วนไคลเอนต์ที่กำหนดอย่างชัดเจนของ React Query เหมาะกว่าสำหรับแอปพลิเคชันขนาดใหญ่ที่มีความต้องการด้านแคชซับซ้อน

เลือก SWR เมื่อแอปพลิเคชันของคุณสร้างบน Next.js เป็นหลัก รูปแบบการดึงข้อมูลไม่ซับซ้อน (ดึงข้อมูล-แสดงผล-ตรวจสอบข้อมูลใหม่) คุณต้องการขนาดบันเดิลที่เล็ก หรือทีมของคุณให้ความสำคัญกับความเรียบง่ายของ API มากกว่าฟีเจอร์ขั้นสูง

SWR ยังเป็นตัวเลือกที่ดีเมื่อคุณต้องการนำไลบรารีดึงข้อมูลมาเพิ่มทีละส่วนในโค้ดเบสที่มีอยู่ โดยไม่ต้องย้ายระบบครั้งใหญ่

เลือก React Query เมื่อคุณต้องการจัดการสถานะจากเซิร์ฟเวอร์ที่ซับซ้อน เช่น การเลื่อนแบบไม่สิ้นสุด การดึงคิวรีล่วงหน้า กลยุทธ์การดึงข้อมูลเบื้องหลังใหม่ การพึ่งพากันของคิวรีหลายขั้นตอน หรือการควบคุม TTL ของแคชอย่างละเอียด

React Query ยังมีระบบนิเวศของมิดเดิลแวร์และ DevTools ที่มีการพัฒนาอย่างต่อเนื่องกว่า และสามารถทดสอบ queryClient แยกจากส่วนอื่นได้ง่ายกว่า

บางทีมใช้ทั้งสองระบบ โดยใช้ SWR สำหรับการดึงข้อมูลทรัพยากรเดียวแบบเรียบง่ายในคอมโพเนนต์ปลายทาง และใช้ React Query สำหรับหน้าที่มีหลายคิวรีซับซ้อนพร้อมการดึงข้อมูลล่วงหน้า วิธีนี้ไม่ค่อยพบเห็น แต่ก็ใช้ได้หากทีมมีความเชี่ยวชาญใน API ทั้งสองแบบ

โดยทั่วไปทีมมักเลือกใช้เพียงระบบเดียวและใช้อย่างสอดคล้องกันตลอดทั้งแอปพลิเคชัน เพื่อหลีกเลี่ยงการสลับบริบทและภาระจากการมีการพึ่งพาสองชุด

SWR (ประมาณ 7 กิโลไบต์) เรียบง่ายกว่า ผสานรวมกับ Next.js ได้โดยตรง และรองรับรูปแบบการดึงข้อมูลแล้วแสดงผลส่วนใหญ่ด้วยโค้ดเพียงเล็กน้อย ส่วน React Query (ประมาณ 13 กิโลไบต์) มีฟีเจอร์ที่หลากหลายกว่า ได้แก่ คิวรีแบบไม่สิ้นสุด การดึงข้อมูลล่วงหน้า การเรียกกลับตามวงจรชีวิตอย่างละเอียด และการยกเลิกคิวรี

เลือก SWR สำหรับความเรียบง่ายและโครงการ Next.js เลือก React Query สำหรับความต้องการจัดการสถานะจากเซิร์ฟเวอร์ที่ซับซ้อน ทั้งสองระบบรองรับ TypeScript, Suspense, SSR และรูปแบบการทำงานแบบออฟไลน์