การแคชข้อมูลใน Next.js: โหลดเร็ว ประหยัดทรัพยากร ทำยังไง?

ถ้าอยากให้เว็บโหลดเร็ว แคช (Cache) คือสิ่งที่ต้องรู้! แคชช่วยลดการเรียก API ซ้ำ ๆ ประหยัดเวลา ประหยัดเซิร์ฟเวอร์ และทำให้ผู้ใช้รู้สึกว่าเว็บเร็วขึ้นมาก 🚀

ใน Next.js เรามีหลายวิธีในการแคชข้อมูล ตั้งแต่ Static Generation (SSG), Server-side Rendering (SSR), Client-side caching (SWR) ไปจนถึง Edge Caching วันนี้เราจะมาดูกันว่าแต่ละแบบใช้เมื่อไหร่ และทำให้เว็บเร็วขึ้นได้ยังไง!

🔥 ทำไมต้องแคชข้อมูล?

ลองนึกภาพว่าเว็บของคุณต้องโหลด สินค้าล่าสุด จาก API ทุกครั้งที่มีคนเข้าเว็บ … 🤯

• ถ้าคนเข้า 100 คน = API ถูกเรียก 100 ครั้ง
• ถ้า API ช้า? เว็บช้าไปด้วย
• ถ้า API มีค่าใช้จ่าย? ยิ่งแพงขึ้นเรื่อย ๆ

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

🛠 วิธีการแคชใน Next.js

Next.js รองรับการแคชหลายแบบขึ้นอยู่กับว่า ข้อมูลของคุณเปลี่ยนบ่อยแค่ไหน

วิธีแคช	ใช้เมื่อ	ตัวอย่าง
Static Generation (SSG)	ข้อมูลไม่ค่อยเปลี่ยน	หน้า About, รายการสินค้า
Incremental Static Regeneration (ISR)	ข้อมูลเปลี่ยนเป็นช่วง ๆ	บทความข่าว, ราคา Bitcoin
Server-side Rendering (SSR)	ข้อมูลต้องสดใหม่ทุกครั้ง	ข้อมูลผู้ใช้, หน้าแดชบอร์ด
Client-side Fetching (SWR, React Query)	ข้อมูลเปลี่ยนบ่อยแบบเรียลไทม์	Notification, Dashboard
Edge Caching	ต้องการโหลดเร็วสุด ๆ	Content ที่แจกจ่ายไปทั่วโลก (CDN)

🏗 1. แคชข้อมูลด้วย Static Generation (SSG)

ถ้าข้อมูลไม่เปลี่ยนบ่อย SSG เป็นวิธีที่ดีที่สุด เพราะ Next.js จะ ดึงข้อมูลมาตอน Build แล้วเสิร์ฟเป็นไฟล์ HTML ทำให้โหลดเร็วสุด ๆ

🔹 ตัวอย่าง SSG

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/products')
  const products = await res.json()

  return { props: { products } }
}

export default function ProductsPage({ products }) {
  return (
    <ul>
      {products.map((product) => (
        <li key={product.id}>{product.name}</li>
      ))}
    </ul>
  )
}

✅ ข้อดีของ SSG

• โหลดเร็วมาก เพราะเป็นไฟล์ HTML ธรรมดา
• ลดโหลดเซิร์ฟเวอร์
• เหมาะกับข้อมูลที่ไม่เปลี่ยนบ่อย เช่น บทความ หรือ รายการสินค้า

❌ ข้อเสีย

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

🔄 2. อัปเดต Static Page ด้วย ISR (Incremental Static Regeneration)

ถ้าอยากใช้ SSG แต่ให้ข้อมูลอัปเดตเป็นช่วง ๆ เราสามารถใช้ revalidate เพื่อให้ Next.js รีเฟรชข้อมูลอัตโนมัติ

🔹 ตัวอย่าง ISR (รีเฟรชข้อมูลทุก 60 วินาที)

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/news')
  const news = await res.json()

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

✅ ข้อดีของ ISR

• โหลดเร็วเหมือน SSG
• ข้อมูลอัปเดตได้เอง ไม่ต้อง Deploy ใหม่

⚡ 3. โหลดข้อมูลฝั่งเซิร์ฟเวอร์ (SSR)

ถ้าข้อมูลต้องอัปเดตทุกครั้งที่มีคนเข้าหน้า SSR (Server-side Rendering) คือทางเลือกที่ดี

🔹 ตัวอย่าง SSR

export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/user')
  const user = await res.json()

  return { props: { user } }
}

✅ ข้อดีของ SSR

• ข้อมูลสดใหม่เสมอ
• เหมาะกับข้อมูลผู้ใช้ หรือแดชบอร์ด

❌ ข้อเสีย

• ช้ากว่า SSG และ ISR เพราะต้องรอโหลดทุกครั้ง

🌀 4. แคชข้อมูลฝั่ง Client ด้วย SWR

ถ้าต้องการให้ข้อมูล อัปเดตอัตโนมัติแบบเรียลไทม์ ใช้ SWR (Stale-While-Revalidate) เป็นตัวเลือกที่ดี

🔹 ตัวอย่างการใช้ SWR

import useSWR from 'swr'

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

export default function Dashboard() {
  const { data, error } = useSWR('/api/dashboard', fetcher, { refreshInterval: 5000 })

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

  return <div>จำนวนผู้ใช้ตอนนี้: {data.users}</div>
}

✅ ข้อดีของ SWR

• โหลดเร็วเพราะดึงจากแคชก่อน
• อัปเดตข้อมูลอัตโนมัติ

❌ ข้อเสีย

• ใช้ได้เฉพาะฝั่ง Client

🌍 5. ใช้ Edge Caching เพื่อโหลดเร็วสุด ๆ

ถ้าอยากให้ Response ถูกแคชทั่วโลก (CDN) Next.js มีฟีเจอร์ Middleware + Edge Functions

🔹 ตัวอย่าง Middleware Caching

import { NextResponse } from 'next/server'

export function middleware(req) {
  const response = NextResponse.next()
  response.headers.set('Cache-Control', 's-maxage=60, stale-while-revalidate')
  return response
}

✅ เหมาะกับ

•     โหลดเร็วสุด ๆ สำหรับ Static Content
•     ใช้ร่วมกับ CDN เช่น Vercel, Cloudflare

🔥 สรุป: ควรใช้แคชแบบไหน?

วิธีแคช	ใช้เมื่อ
SSG	ข้อมูลไม่เปลี่ยนบ่อย (โหลดเร็วมาก)
ISR	ข้อมูลเปลี่ยนเป็นช่วง ๆ (อัปเดตอัตโนมัติ)
SSR	ข้อมูลต้องสดใหม่ทุกครั้ง
SWR	อัปเดตข้อมูลอัตโนมัติฝั่ง Client
Edge Caching	โหลดเร็วสุด ๆ ทั่วโลก

✅ ใช้ SSG หรือ ISR ถ้าเป็นไปได้ เพราะเร็วและลดโหลดเซิร์ฟเวอร์
✅ ใช้ SSR เมื่อข้อมูลต้องอัปเดตเสมอ
✅ ใช้ SWR ถ้าเป็นข้อมูลที่ต้องอัปเดตเรียลไทม์