[Next.js] มาลองทำ Prefetching Data โดยใช้ SWR กันเถอะ

สำหรับคนมีเวลาอ่านน้อย

• SWR เป็นเครื่องมือที่จะช่วยทำให้คุณทำ prefetching ได้อย่างง่ายดาย
• เปรียบเทียบระหว่างทำ prefetching กับ fetching โดยใช้ SWR

prefetching

fetching

กด 🔖 (Bookmark) ไว้อ่านทีหลังกันได้ถ้าไม่มีเวลา
ใครอยากเข้าใจมากขึ้นเริ่มอ่านบทความนี้ได้เลย 👇🏻

** คำเตือน บทความนี้ไม่เหมาะกับคนที่ยังเขียน React ด้วย class component
เพราะว่า SWR is a React Hooks library for remote data fetching.

SWR คืออะไร

สำหรับคนที่ยังไม่รู้ว่ามันคืออะไร เจ้าของบล็อกจะไม่พิมพ์เยอะเจ็บมือ 555+
ลองไปอ่านกันเอาเองนะครับ

vercel/swr

มาลองใช้ SWR เพื่อ Fetch API กันดีกว่า

วันนี้เราจะมาทำอะไร ?

วันนี้เราจะมาทำ prefetching data api จาก jsonplaceholder โดยเมื่อ user เอาเม้าส์ชี้ไปที่ navigates จะทำการ prefetching ทันที เพราะตามหลัก UX ได้กล่าวเราไว้ว่า เมื่อ user เอาเม้าส์ไปชี้ที่ navigiates นั้น นั่นหมายความว่า user ต้องการที่จะคลิกไปหน้านั้น ๆ นั่นเอง

ทำไมเราต้องทำ Prefetching Data ด้วยล่ะ ?

เพื่อเพิ่ม UX ให้กับ user ยังไงละ เพิ่มยังไง เช่น user กดเปลี่ยนหน้า ข้อมูลที่อยู่ในหน้านั้นจะถูกโหลดมาแล้ว โดยที่ user ไม่ต้องรอ Loading ใดๆเลยไงละ แต่ถ้าคนที่ใช้ Next.js อยู่แล้ว แล้วคิดว่าหน้านั้นข้อมูลจะไม่เปลี่ยนแปลงแน่ๆ ก็อาจจะใช้ SSG ไปเลย หรือทำ SSR ก็ได้ เพราะ SWR สามารถใช้กับ SSR ได้ ลองไปอ่านดูใน doc ของ swr ได้เลยครับ

สร้างโปรเจค

npx create-next-app swr-app

install เสร็จก็ cd /swr-app

npm i --save swr axios

structure

เริ่มแรกเราจะทำ navigation bar ก่อนนะครับ โดยมีหน้าสมมุติคือ

• About
• Profile
• About

page/_app.js

มาต่อกันที่ folder hooks/use-home นะครับ ในส่วนนี้ได้ทำเป็น custom hook เอาไว้เผื่ออนาคตเราจะนำเอาไป reuse ได้

hooks/use-home.js

ส่วน use-about , use-profile ก็ทำเหมือนกันเลยครับ เปลี่ยนแค่ key อยากให้มันไป fetch api endpoint ไหน ก็ลองไปเลือกได้เลยครับ https://jsonplaceholder.typicode.com/

เสร็จแล้วไปที่ utils/fetcher.js ต่อนะครับ

utils/fetcher.js

อธิบาย function fetchAndCache(key) นะครับ ก็คือ function นี้จะทำงานตอนที่เราเอาเม้าส์ไปชี้ที่ navigates พวก home , about , profile นั่นแหละ เพื่อทำการ prefetch และ cache data ไว้
สังเกตตรง mutate(key, request, false) นะครับ

• key จะต้องตรงกับที่เราใช้ที่ useSwr นะครับ
• request คือ data ที่เราจะเก็บแล้วเอาไว้ใน key นั้น
• พารามิเตอร์ตัวที่ 3 ถ้าเราไม่ใส่มันจะ default เป็น true ให้ แต่ถ้าเราใส่ false

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

ส่วนสุดท้ายแล้วววววววว ไปที่ pages/index

ใน pages/about , profile ก็ทำเหมือนกันเลย

เสร็จแล้ววววว

เรามาดูลองดูระหว่างทำ prefetching กับไม่ทำกันนะครับ

prefetch

ไม่ได้ทำ prefetch

ตัวอย่างที่ไม่ได้ทำ prefetch ตอนกดเปลี่ยนหน้ารอบแรกก็จะมี Loading แปปนึง แต่กดครั้งต่อไป ก็จะไปดึง cache จาก SWR นั่นเองครับ

สรุป

SWR นั้นช่วยทำให้การ fetch data เป็นเรื่องที่ง่ายและเร็ว และยังสามารถทำ prefetching ได้อย่างง่ายๆ แต่ถ้าเราใช้ Next.js แล้วเราสามารถทำ SSG หรือ SSR น่าจะดีกว่า โดยความคิดเห็นส่วนตัวเจ้าของบล็อกนั้น ถ้าจะทำ prefetching ด้วย SWR น่าจะเหมาะกับ React หรือ Next.js ที่ทำแบบ static page ซะมากกว่า
ถ้ามีข้อมูลตรงไหนผิดพลาด comment มาได้เลยนะครับ วันนี้ลาไปก่อน สวัสดีครับ

Reference

Prefetching Data in a Next.js Application with SWR

Code :

floukna/swr-prefetching