Sync Enterprise Data: ผสาน React Query กับ Server Actions

ระบบแคชหลายระดับของ Next.js App Router ทั้ง Data Cache, Full Route Cache และ Client Router Cache ช่วยให้การเรนเดอร์ฝั่งเซิร์ฟเวอร์และการสร้างหน้าแบบสถิตทำงานได้อย่างไร้ที่ติ แต่เมื่อแอปพลิเคชันระดับองค์กรเติบโตจนกลายเป็น Single Page Applications (SPAs) ที่เน้นแดชบอร์ดและการโต้ตอบสูง นักพัฒนาจะพบช่องว่างสำคัญในสถาปัตยกรรม นั่นคือ การซิงค์สถานะฝั่งไคลเอนต์ (Client-Side State Synchronization)

ลองจินตนาการถึงกระดานจัดการโปรเจกต์ที่ซับซ้อน เมื่อผู้ใช้งานเปิดแท็บที่ 1 และแท็บที่ 2 พร้อมกัน หากมีการเปลี่ยนชื่อทาสก์ในแท็บที่ 1 ฟังก์ชัน Next.js Server Actions จะสามารถอัปเดตฐานข้อมูลและเรียกใช้ revalidatePath() เพื่ออัปเดตแท็บที่ 1 ได้ แต่แท็บที่ 2 จะยังคงแสดงข้อมูลเดิม ยิ่งไปกว่านั้นหากผู้ใช้อินเทอร์เน็ตหลุดและกลับมาเชื่อมต่อใหม่ Next.js ไม่มีกลไกอัตโนมัติในการดึงข้อมูลเบื้องหลังเพื่ออัปเดตหน้าจอให้สดใหม่เสมอ

ทางทีมงาน Smart Tech Devs จึงได้แก้ไขปัญหานี้ด้วยการสร้างเลเยอร์ดึงข้อมูลแบบไฮบริด โดยผสมผสานพลังเบื้องหลังของ Next.js Server Actions เข้ากับการซิงค์สถานะฝั่งไคลเอนต์จาก TanStack React Query

ความท้าทายหลักของการใช้ React Query ในสภาพแวดล้อม Server-Side Rendered (SSR) อย่าง Next.js คือเรื่องของ Hydration ซึ่งเราต้องการให้เซิร์ฟเวอร์ดึงข้อมูลก่อนเพื่อผลลัพธ์ด้าน SEO และความเร็วในการแสดงผลทันที จากนั้นให้ React Query ฝั่งไคลเอนต์เข้ามาจัดการข้อมูลต่อหลังจาก JavaScript โหลดเสร็จสิ้น

ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง

กระบวนการนี้ถูกสร้างขึ้นผ่านรูปแบบ Hydration Boundary โดยเซิร์ฟเวอร์จะดึงข้อมูลและแปลงข้อมูลเป็น payload จากนั้นไคลเอนต์จะรับ HTML และทำการ hydrate เข้าสู่แคชของ React Query ทันที

เนื่องจาก Next.js App Router พึ่งพา Server Components เป็นหลัก เราจึงไม่สามารถใส่ QueryClientProvider ไว้ที่ไฟล์ root layout.tsx ได้โดยตรง มิฉะนั้นจะทำให้ทั้งแอปพลิเคชันกลายเป็น Client Component ทันที ทางออกคือการสร้าง Client Component wrapper ขึ้นมาโดยเฉพาะ

เมื่อต้องการทำการเปลี่ยนแปลงข้อมูล เราจะเลือกใช้ useMutation ซึ่งเข้ามาแทนที่การเรียก REST API แบบเดิมด้วยความปลอดภัยจาก Next.js Server Actions

ที่มา: Dev.to