การใช้ Redis ใน Next.js

ในยุคปัจจุบันที่เทคโนโลยีเว็บแอปพลิเคชันต้องการการทำงานที่รวดเร็วและมีประสิทธิภาพสูง, Redis เป็นหนึ่งในเครื่องมือที่ได้รับความนิยมในด้านการจัดการข้อมูลแบบ In-memory หรือการจัดเก็บข้อมูลในหน่วยความจำ (RAM) ที่ช่วยให้การเข้าถึงข้อมูลนั้นเร็วขึ้นมาก ซึ่ง Redis สามารถใช้เป็น Cache (การเก็บข้อมูลในหน่วยความจำชั่วคราว) หรือ Message Broker (ตัวกลางสำหรับการส่งข้อความระหว่างระบบ) ได้

ในบทความนี้เราจะมาพูดถึงวิธีการ ใช้ Redis ใน Next.js โดยการเชื่อมต่อ Redis กับ Next.js ช่วยให้เราสามารถเพิ่มความเร็วให้กับแอปพลิเคชัน โดยเฉพาะในด้านการจัดการการเก็บข้อมูลชั่วคราวหรือการทำงานร่วมกับระบบที่มีการเข้าถึงข้อมูลที่บ่อยครั้ง

ทำไม Redis ถึงสำคัญ?

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

1. การเก็บข้อมูลในหน่วยความจำ (In-memory storage): Redis เป็นฐานข้อมูลที่จัดเก็บข้อมูลใน RAM ซึ่งทำให้สามารถเข้าถึงข้อมูลได้รวดเร็วมากเมื่อเทียบกับฐานข้อมูลที่เก็บข้อมูลบนดิสก์
2. เหมาะสำหรับการแคช (Caching): Redis นิยมใช้ในการเก็บข้อมูลที่ถูกใช้งานบ่อยๆ เช่น ผลลัพธ์จากการคำนวณที่มีราคาแพง หรือผลลัพธ์จากการดึงข้อมูลจากฐานข้อมูลที่ใช้เวลานาน ซึ่งสามารถเก็บไว้ใน Redis เพื่อให้สามารถดึงข้อมูลได้เร็วขึ้นในครั้งถัดไป
3. รองรับการทำงานแบบ Pub/Sub: Redis สามารถใช้เป็นระบบ Message Broker โดยรองรับการส่งข้อความในรูปแบบ Publish/Subscribe ซึ่งช่วยให้การส่งข้อมูลระหว่างบริการต่างๆ ในแอปพลิเคชันสามารถทำได้เร็วและมีประสิทธิภาพ
4. รองรับการทำงานหลายแอปพลิเคชัน: Redis สามารถเชื่อมต่อกับแอปพลิเคชันได้หลากหลายภาษาและเฟรมเวิร์ก รวมถึง Next.js ที่เป็นเฟรมเวิร์กที่นิยมใช้ในการพัฒนาเว็บแอป

ขั้นตอนการใช้ Redis ใน Next.js

1. การติดตั้ง Redis และไลบรารีที่จำเป็น

ก่อนที่จะเชื่อมต่อ Redis กับ Next.js, เราต้องติดตั้ง Redis และไลบรารีที่จำเป็นในการเชื่อมต่อ Redis จาก Node.js เช่น ioredis หรือ redis ซึ่งจะช่วยให้เราสามารถเชื่อมต่อ Redis ได้ง่ายๆ

การติดตั้ง Redis:

ถ้าคุณยังไม่ได้ติดตั้ง Redis บนเครื่องของคุณ, คุณสามารถติดตั้งได้ผ่านคำสั่งดังนี้ (ในกรณีใช้ MacOS):

brew install redis

หรือในกรณีของ Ubuntu:

sudo apt-get install redis-server

การติดตั้งไลบรารี Redis ใน Next.js:

ใช้คำสั่งดังนี้เพื่อทำการติดตั้งไลบรารี ioredis ซึ่งเป็นไลบรารีที่นิยมใช้ในการเชื่อมต่อ Redis ใน Node.js:

npm install ioredis

หรือถ้าคุณใช้ yarn:

yarn add ioredis

2. การตั้งค่า Redis Client

เมื่อเราได้ติดตั้งไลบรารี Redis แล้ว, ขั้นตอนต่อไปคือการตั้งค่า Redis Client สำหรับเชื่อมต่อกับ Redis instance ที่เราติดตั้งไว้

ตัวอย่างการตั้งค่า Redis Client:

// lib/redis.js
import Redis from 'ioredis';

const redis = new Redis({
  host: 'localhost', // หรือใช้ host ที่ Redis ของคุณอยู่
  port: 6379, // default Redis port
  password: '', // หาก Redis ของคุณมีการตั้งรหัสผ่าน
});

export default redis;

ในตัวอย่างนี้, เราจะใช้ ioredis ในการสร้าง Redis Client และเชื่อมต่อกับ Redis instance ที่อยู่บนเครื่องของเรา (localhost) ซึ่งสามารถตั้งค่าเพิ่มเติมได้ตามความต้องการ เช่น การใช้ password หรือการตั้งค่าการเชื่อมต่อแบบอื่นๆ

3. การใช้ Redis ใน API Routes ของ Next.js

หลังจากที่เราตั้งค่า Redis Client แล้ว, ขั้นตอนถัดไปคือการใช้ Redis ใน API Routes ของ Next.js เพื่อทำการแคชข้อมูลหรือใช้ Redis เพื่อเก็บข้อมูลชั่วคราว ตัวอย่างการใช้งาน Redis ใน API Route ของ Next.js

ตัวอย่างการใช้ Redis ใน API Route:

// pages/api/cache-data.js
import redis from '../../lib/redis';

export default async function handler(req, res) {
  if (req.method === 'GET') {
    const cachedData = await redis.get('myData'); // ดึงข้อมูลจาก Redis

    if (cachedData) {
      console.log('Cache hit');
      return res.status(200).json(JSON.parse(cachedData)); // ถ้ามีข้อมูลใน Cache ให้ส่งกลับไป
    }

    console.log('Cache miss');
    // ถ้าไม่มีข้อมูลใน Cache, เราสามารถดึงข้อมูลจากฐานข้อมูลหรือ API อื่นๆ
    const data = { name: 'John Doe', age: 30 };

    // เก็บข้อมูลใน Cache โดยใช้ Redis
    await redis.set('myData', JSON.stringify(data), 'EX', 60 * 60); // ตั้งเวลา Cache หมดอายุภายใน 1 ชั่วโมง

    return res.status(200).json(data); // ส่งข้อมูลไปยังผู้ใช้งาน
  }
}

ในตัวอย่างนี้, เราใช้ Redis เพื่อเก็บข้อมูลในหน่วยความจำและลดการเข้าถึงข้อมูลซ้ำๆ ที่เกิดจากการดึงข้อมูลจากฐานข้อมูลหรือแหล่งข้อมูลอื่นๆ โดยที่ myData จะถูกเก็บใน Redis และมีการตั้งเวลาให้หมดอายุหลังจาก 1 ชั่วโมง (EX หมายถึงเวลาหมดอายุในวินาที)

4. การใช้ Redis ในการจัดการการทำงานแบบ Session

Redis ยังสามารถใช้ในการจัดการ Session ของผู้ใช้งานในเว็บแอปพลิเคชันของเรา โดยการเก็บข้อมูลการเข้าสู่ระบบของผู้ใช้ เช่น token หรือข้อมูลการล็อกอิน

ตัวอย่างการจัดการ Session ด้วย Redis:

// pages/api/login.js
import redis from '../../lib/redis';

export default async function handler(req, res) {
  if (req.method === 'POST') {
    const { username, password } = req.body;

    // ตรวจสอบข้อมูลผู้ใช้ (แค่ตัวอย่าง, ในการใช้งานจริงต้องตรวจสอบจากฐานข้อมูล)
    if (username === 'admin' && password === 'password') {
      const sessionToken = 'some-random-token';

      // เก็บ session ใน Redis
      await redis.set(`session:${sessionToken}`, JSON.stringify({ username }), 'EX', 3600); // Session หมดอายุภายใน 1 ชั่วโมง

      return res.status(200).json({ message: 'Login successful', token: sessionToken });
    } else {
      return res.status(401).json({ message: 'Invalid credentials' });
    }
  }
}

ในตัวอย่างนี้, เมื่อผู้ใช้ทำการล็อกอินสำเร็จ, เราจะสร้าง sessionToken และเก็บไว้ใน Redis ซึ่งจะหมดอายุหลังจาก 1 ชั่วโมง

5. การใช้ Redis ในการทำงานแบบ Pub/Sub

Redis ยังรองรับการทำงานในรูปแบบ Publish/Subscribe (Pub/Sub) ซึ่งช่วยให้คุณสามารถส่งข้อความจากที่หนึ่งไปยังอีกที่หนึ่งได้โดยตรงในระบบ

ตัวอย่างการใช้ Pub/Sub ใน Redis:

// pub.js (สำหรับ Publish)
import redis from './lib/redis';

export function publishMessage(channel, message) {
  redis.publish(channel, message);
}

// sub.js (สำหรับ Subscribe)
import redis from './lib/redis';

redis.subscribe('myChannel', (err, count) => {
  if (err) {
    console.error('Subscription error:', err);
  }
});

redis.on('message', (channel, message) => {
  if (channel === 'myChannel') {
    console.log('Received message:', message);
  }
});

ในตัวอย่างนี้, เราจะใช้ Redis ในการส่งข้อความจากที่หนึ่งไปยังอีกที่หนึ่งผ่าน Pub/Sub ซึ่งเป็นประโยชน์ในระบบที่ต้องการการแจ้งเตือนหรือการส่งข้อมูลระหว่างบริการต่างๆ ที่เกี่ยวข้อง

สรุป

การใช้ Redis ใน Next.js เป็นวิธีที่ยอดเยี่ยมในการเพิ่มประสิทธิภาพของแอปพลิเคชันของคุณ โดยการเก็บข้อมูลใน หน่วยความจำ ทำให้สามารถเข้าถึงข้อมูลได้เร็วขึ้น ซึ่งเหมาะสำหรับการใช้ในกรณีที่ข้อมูลมีการใช้งานบ่อยๆ หรือการจัดการข้อมูลชั่วคราว เช่น การแคชข้อมูลหรือการจัดการ session นอกจากนี้ Redis ยังสามารถใช้ในการทำงานแบบ Pub/Sub ซึ่งเป็นประโยชน์ในการสร้างระบบที่สามารถสื่อ

การเรียก API ภายใน Next.js อย่างมีประสิทธิภาพ

การเรียก API เป็นเรื่องที่ทุกเว็บแอปต้องทำ ไม่ว่าจะเป็นการดึงข้อมูลจาก Backend, Third-party APIs หรือแม้แต่ API ภายในแอปเอง แต่จะเรียกยังไงให้เร็ว แรง และไม่ทำให้เว็บช้า?

Next.js มีหลายวิธีในการเรียก API ไม่ว่าจะเป็น Server-side fetching, Client-side fetching, Static generation, หรือแม้แต่ ใช้ API Routes ภายในตัวเอง วันนี้เราจะมาเจาะลึกกันว่าควรเลือกใช้วิธีไหนในแต่ละสถานการณ์ เพื่อให้แอปของคุณทำงานเร็วที่สุด 🚀

🔍 วิธีเรียก API ใน Next.js

ใน Next.js เราสามารถเรียก API ได้หลัก ๆ 3 วิธี

1. Client-side fetching → ใช้ fetch หรือ SWR ใน React Component
2. Server-side fetching (SSR) → ใช้ getServerSideProps เพื่อโหลดข้อมูลตอนโหลดหน้า
3. Static generation (SSG) → ใช้ getStaticProps โหลดข้อมูลล่วงหน้า

แต่ละวิธีมีข้อดีข้อเสียต่างกัน เดี๋ยวมาดูรายละเอียดกันเลย!

🎯 1. การเรียก API ฝั่ง Client (Client-side Fetching)

ถ้าข้อมูลที่เราต้องการโหลด ไม่จำเป็นต้องมาเร็วก่อนหน้าแสดงผล เช่น

•     รายการโพสต์
•     คอมเมนต์
•     ข้อมูลที่อัปเดตแบบเรียลไทม์

การใช้ Client-side Fetching จะช่วยให้หน้าเว็บโหลดเร็วขึ้นเพราะมันจะดึงข้อมูลหลังจากโหลดหน้าเสร็จ

🔹 วิธีใช้ fetch กับ useEffect (พื้นฐาน)

import { useEffect, useState } from 'react'

export default function Posts() {
  const [posts, setPosts] = useState([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    fetch('/api/posts')
      .then((res) => res.json())
      .then((data) => {
        setPosts(data)
        setLoading(false)
      })
  }, [])

  if (loading) return <p>กำลังโหลดโพสต์...</p>

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}

แต่ปัญหาของวิธีนี้คือ ทุกครั้งที่เข้าเพจ มันจะ fetch API ใหม่เสมอ ซึ่งอาจทำให้โหลดข้อมูลซ้ำ ๆ แบบไม่จำเป็น

🔹 วิธีใช้ SWR ให้โหลดเร็วขึ้น

ถ้าอยากให้ ดึงข้อมูลแล้วแคชไว้ ไม่ต้องโหลดใหม่ตลอด SWR เป็นตัวช่วยที่ดี

import useSWR from 'swr'

const fetcher = (url) => fetch(url).then((res) => res.json())

export default function Posts() {
  const { data, error } = useSWR('/api/posts', fetcher)

  if (error) return <p>เกิดข้อผิดพลาด</p>
  if (!data) return <p>กำลังโหลด...</p>

  return (
    <ul>
      {data.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}

✅ SWR ดียังไง?

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

ถ้าเป็น ข้อมูลที่ต้องอัปเดตบ่อย เช่น Dashboard หรือ Notifications ควรใช้ SWR จะดีที่สุด!

⚡️ 2. การเรียก API ฝั่งเซิร์ฟเวอร์ (SSR)

บางครั้งเราต้องโหลดข้อมูล ก่อนแสดงผลหน้าเว็บ เช่น

• ข้อมูลผู้ใช้ที่ล็อกอิน
• สินค้าในตะกร้า
• รายการสั่งซื้อ

ในกรณีนี้ getServerSideProps เป็นทางเลือกที่ดี เพราะมันจะดึงข้อมูลบนเซิร์ฟเวอร์ก่อนแล้วส่งไปให้หน้าเว็บ

🔹 วิธีใช้ getServerSideProps

export async function getServerSideProps() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts')
  const data = await res.json()

  return { props: { posts: data } }
}

export default function Posts({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}

✅ ข้อดีของ SSR

• โหลดข้อมูลก่อนแสดงผล → ผู้ใช้เห็นข้อมูลทันที
• เหมาะกับข้อมูลที่เปลี่ยนแปลงบ่อย เช่น ข้อมูลผู้ใช้
• รองรับ SEO ดีกว่า Client-side Fetching

❌ ข้อเสีย

• โหลดช้ากว่าเพราะต้องรอ API ตอบก่อนแสดงผล
• ถ้า API ช้าจะทำให้หน้าเว็บช้าไปด้วย

ถ้าเป็น API ที่ต้องใช้ข้อมูลสดใหม่ทุกครั้ง เช่น ข้อมูลผู้ใช้ที่ล็อกอินอยู่ getServerSideProps คือทางเลือกที่ดี

🏎 3. โหลด API ล่วงหน้าด้วย Static Generation (SSG)

ถ้าข้อมูลที่เราต้องการ เปลี่ยนแปลงไม่บ่อย เช่น

• บทความ
• รายชื่อสินค้า
• รายการหมวดหมู่

เราสามารถใช้ getStaticProps โหลดข้อมูลตอน Build เวลา Deploy แล้วหน้าเว็บจะโหลดเร็วมาก 🚀

🔹 วิธีใช้ getStaticProps

export async function getStaticProps() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts')
  const data = await res.json()

  return { props: { posts: data } }
}

export default function Posts({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}

✅ ข้อดีของ SSG

• โหลดเร็วมาก เพราะไม่ต้องรอ API ตอนเปิดหน้า
• เหมาะกับหน้าเว็บที่ข้อมูลเปลี่ยนไม่บ่อย

❌ ข้อเสีย

• ข้อมูลจะไม่อัปเดตจนกว่าจะ Build ใหม่

ถ้าต้องการให้ SSG รีเฟรชข้อมูลได้เอง สามารถใช้ revalidate เช่น

export async function getStaticProps() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts')
  const data = await res.json()

  return { props: { posts: data }, revalidate: 60 } // รีเฟรชทุก 60 วินาที
}

🔥 สรุป: ควรใช้วิธีไหน?

วิธี	ใช้เมื่อ	ข้อดี	ข้อเสีย
Client-side Fetching	ข้อมูลเปลี่ยนบ่อย (Dashboard, คอมเมนต์)	โหลดเร็ว ไม่ต้องรอ API	ไม่ดีต่อ SEO
Server-side Fetching (SSR)	ข้อมูลต้องอัปเดตทุกครั้ง เช่น ผู้ใช้ล็อกอิน	โหลดก่อนแสดงผล ดีต่อ SEO	ช้ากว่า Client-side
Static Generation (SSG)	ข้อมูลเปลี่ยนไม่บ่อย เช่น บทความ	โหลดเร็วมาก	ไม่อัปเดตอัตโนมัติ

เลือกให้เหมาะสมกับโปรเจกต์ของคุณ แล้วเว็บจะทั้งเร็วและมีประสิทธิภาพ! 🚀

การใช้ SWR ใน Next.js เพื่อดึงข้อมูลแบบ Client-side

ในโลกของการพัฒนาเว็บแอปพลิเคชัน ฝั่ง Frontend ต้องมีวิธีดึงข้อมูลจาก API อย่างมีประสิทธิภาพ ซึ่งใน Next.js มีหลายแนวทางให้เลือกใช้ เช่น getServerSideProps (SSR), getStaticProps (SSG), หรือ Client-side Fetching ซึ่งแต่ละวิธีก็มีข้อดีข้อเสียต่างกันไป

ถ้าพูดถึงการดึงข้อมูลแบบ Client-side แล้ว SWR เป็นตัวเลือกที่หลายคนชอบ เพราะมันช่วยให้การ fetch ข้อมูลลื่นไหล อัปเดตอัตโนมัติ และยังจัดการแคชได้อย่างฉลาด วันนี้เราจะมาทำความรู้จัก SWR และดูวิธีใช้งานใน Next.js กันแบบเข้าใจง่าย ๆ

🔍 SWR คืออะไร?

SWR ย่อมาจาก Stale-While-Revalidate เป็นแนวคิดที่ช่วยให้การดึงข้อมูลเร็วและสดใหม่ตลอดเวลา โดยที่ไม่ต้องให้ผู้ใช้รอนานเกินไป โดยถูกพัฒนาโดยทีมเดียวกับ Next.js (Vercel) ทำให้มันเหมาะกับการใช้ในโปรเจ็กต์ที่พัฒนาโดย Next.js มาก

หลักการของ SWR คือ

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

ฟังดูดีใช่ไหม? เพราะมันช่วยให้การโหลดข้อมูลไม่กระตุก และมีประสบการณ์ใช้งานที่ดีขึ้น

🚀 ติดตั้ง SWR

ก่อนอื่น ถ้ายังไม่ได้ติดตั้ง SWR สามารถติดตั้งได้ง่าย ๆ ด้วยคำสั่งนี้

npm install swr
# หรือถ้าใช้ yarn
yarn add swr

เสร็จแล้วก็พร้อมลุย! 🎉

🛠 วิธีใช้ SWR เบื้องต้น

SWR ใช้งานง่ายมาก ๆ เพียงแค่ import และใช้ useSWR ใน React Component

import useSWR from 'swr'

const fetcher = (url) => fetch(url).then(res => res.json())

export default function Profile() {
  const { data, error } = useSWR('/api/user', fetcher)

  if (error) return <div>โหลดข้อมูลไม่สำเร็จ 😢</div>
  if (!data) return <div>กำลังโหลดข้อมูล... ⏳</div>

  return (
    <div>
      <h1>สวัสดี, {data.name}!</h1>
      <p>อีเมล: {data.email}</p>
    </div>
  )
}

อธิบายโค้ด

• เราใช้ useSWR เพื่อดึงข้อมูลจาก /api/user
• fetcher คือฟังก์ชันที่ใช้ดึงข้อมูลจาก API
• ถ้ามี error จะแสดงข้อความผิดพลาด
• ถ้าข้อมูลยังมาไม่ถึง จะแสดงข้อความ กำลังโหลด...
• ถ้าทุกอย่างเรียบร้อยแล้ว ก็โชว์ข้อมูลที่ดึงมาได้

ข้อดีของวิธีนี้คือ ไม่ต้องใช้ useEffect หรือจัดการ state เองเลย เพราะ SWR จัดการให้หมด!

⚡️ ทำไม SWR ถึงดีกว่า useEffect + fetch?

บางคนอาจสงสัยว่า "แล้วทำไมไม่ใช้ useEffect กับ fetch ตรง ๆ ล่ะ?" คำตอบคือ SWR ดีกว่าเพราะ

✅ จัดการแคชให้อัตโนมัติ – ไม่ต้องโหลดข้อมูลซ้ำถ้ายังอยู่ในแคช
✅ อัปเดตข้อมูลเมื่อมีการเปลี่ยนแปลง – ไม่ต้อง reload หน้าเอง
✅ รองรับการ Revalidate อัตโนมัติ – ดึงข้อมูลใหม่เมื่อลูกค้ากลับมาที่หน้าเว็บ
✅ รองรับการดึงข้อมูลแบบ on-focus & re-fetch on reconnect – ไม่ต้องกดรีเฟรชเอง

ถ้าใช้ useEffect และ fetch เราต้องเขียนโค้ดจัดการแคชเอง ซึ่งยุ่งยากและซับซ้อนกว่า

🔄 ตัวอย่างการใช้ Mutate และ Revalidate

ถ้าต้องการให้ข้อมูลอัปเดตทันทีโดยไม่ต้องรอ SWR รีเฟรชเอง สามารถใช้ mutate ได้

import useSWR, { mutate } from 'swr'

const fetcher = (url) => fetch(url).then(res => res.json())

export default function Dashboard() {
  const { data } = useSWR('/api/stats', fetcher)

  return (
    <div>
      <h1>ยอดผู้ใช้งาน: {data ? data.users : 'กำลังโหลด...'}</h1>
      <button onClick={() => mutate('/api/stats')}>โหลดข้อมูลใหม่</button>
    </div>
  )
}

เมื่อกดปุ่ม โหลดข้อมูลใหม่ ระบบจะดึงข้อมูลใหม่จาก API ทันที

🔐 ใช้ SWR กับ Authentication

SWR เหมาะกับระบบที่ต้องใช้ Token Authentication เช่น JWT หรือ OAuth เพราะสามารถส่ง Header ไปกับทุก Request ได้ง่าย ๆ

import useSWR from 'swr'

const fetcher = (url) =>
  fetch(url, {
    headers: {
      Authorization: `Bearer ${localStorage.getItem('token')}`,
    },
  }).then((res) => res.json())

export default function UserProfile() {
  const { data, error } = useSWR('/api/profile', fetcher)

  if (error) return <div>โหลดข้อมูลไม่สำเร็จ</div>
  if (!data) return <div>กำลังโหลด...</div>

  return <h1>ชื่อผู้ใช้: {data.username}</h1>
}

🔥 การใช้งาน SWR กับ GraphQL

ถ้าใช้ GraphQL เราก็สามารถใช้ SWR ได้ โดยเปลี่ยนจาก fetch เป็นการส่ง Query ไปยัง API

const fetcher = (query) =>
  fetch('/graphql', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ query }),
  }).then((res) => res.json())

const GET_USER = `
  {
    user {
      name
      email
    }
  }
`

export default function UserProfile() {
  const { data, error } = useSWR(GET_USER, fetcher)

  if (error) return <div>โหลดข้อมูลไม่สำเร็จ</div>
  if (!data) return <div>กำลังโหลด...</div>

  return <h1>ชื่อ: {data.user.name}</h1>
}

📌 สรุป

SWR เป็นเครื่องมือที่ช่วยให้การดึงข้อมูลแบบ Client-side ง่ายขึ้น โดยที่ไม่ต้องจัดการแคชเอง รองรับการอัปเดตข้อมูลอัตโนมัติ และมีประสิทธิภาพสูงกว่าการใช้ useEffect + fetch แบบเดิม ๆ
✅ เหมาะกับ

• ดึงข้อมูลที่เปลี่ยนแปลงบ่อย เช่น ยอดไลก์, คอมเมนต์, จำนวนผู้ใช้
• แสดงข้อมูลให้ผู้ใช้เร็วที่สุด โดยใช้แคช
• อัปเดตข้อมูลอัตโนมัติ โดยไม่ต้องรีเฟรชหน้า

ถ้าคุณใช้ Next.js อยู่แล้ว ลองเอา SWR ไปใช้ดู รับรองว่าชีวิตง่ายขึ้นแน่นอน! 🚀