Next.js: สร้างเว็บเร็วฟ้าผ่า⚡ ด้วย SSG และ ISR🤔

สวัสดีทุกคน! เวลาเราพูดถึงการสร้างเว็บให้เร็วสุด ๆ ใน Next.js สองคำที่เราจะได้ยินบ่อยที่สุดก็คือ SSG และ ISR 🚀

ทั้งสองอย่างนี้เป็นหัวใจสำคัญที่ทำให้ Next.js โดดเด่นเรื่อง Performance แต่หลายคนอาจจะยังสับสนว่ามันคืออะไร? ต่างกันยังไง? และควรใช้ตอนไหน? วันนี้เราจะมาไขข้อข้องใจทั้งหมดนี้กันในเวอร์ชัน App Router ล่าสุดครับ!

1. SSG (Static Site Generation): ราชาแห่งความเร็ว 👑

SSG คือการ "สร้างหน้าเว็บเตรียมไว้ล่วงหน้า"

คอนเซ็ปต์: แทนที่จะรอให้ Server ประมวลผลและสร้างหน้าเว็บทุกครั้งที่มีคนเข้ามาดู (SSR), SSG จะทำการ สร้างหน้าเว็บทั้งหมดเป็นไฟล์ HTML นิ่ง ๆ เตรียมไว้ตั้งแต่ตอน build โปรเจกต์

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

ใน App Router, SSG คือค่าเริ่มต้น! ใช่แล้ว! แค่เราสร้าง Page Component ที่ไม่มีการใช้ Dynamic Functions หรือ fetch ที่ปิด cache, Next.js ก็จะจัดการทำเป็น SSG ให้เราโดยอัตโนมัติ

// นี่คือหน้าเว็บแบบ SSG 100%
// มันจะถูกสร้างเป็นไฟล์ about.html ตอน build
 
export default function AboutPage() {
  return (
    <div>
      <h1>เกี่ยวกับเรา</h1>
      <p>
        เราคือบริษัทที่มุ่งมั่นสร้างสรรค์นวัตกรรม...
      </p>
    </div>
  );
}

ข้อดีสุด ๆ ของ SSG:

• เร็วฟ้าผ่า: ส่งไฟล์ HTML ได้ทันที TTFB (Time to First Byte) ต่ำมาก
• เสถียรและพร้อมใช้: ลดภาระ Server ไปได้เยอะมาก เพราะไม่ต้องประมวลผลอะไรเลย
• ปลอดภัย: เป็นแค่ไฟล์นิ่ง ๆ ลดพื้นผิวการโจมตี
• SEO ดีเยี่ยม: Search engine bots สามารถเข้ามาเก็บข้อมูลได้ง่าย

แต่...มันก็มีคำถามสำคัญ:

"แล้วถ้าข้อมูลมันเปลี่ยนล่ะ?" 🤔

นี่คือจุดอ่อนของ SSG ครับ... ถ้าข้อมูลในฐานข้อมูลของเราเปลี่ยนไป หน้าเว็บ Static ที่สร้างไว้ก็จะ "ตกรุ่น" (Stale) ทันที ทางแก้คือต้อง build โปรเจกต์ใหม่ทั้งหมด ซึ่งไม่สะดวกเลยถ้าเว็บมีเป็นร้อยเป็นพันหน้า หรือข้อมูลเปลี่ยนบ่อย

และนี่คือที่มาของพระเอกคนต่อไป...

2. ISR (Incremental Static Regeneration): เว็บ Static ที่มีชีวิต ✨

ISR คือการอัปเกรด SSG ให้ฉลาดขึ้น มันคือ "เค้กที่อบเตรียมไว้พร้อมเสริฟ แต่มีเชฟคอยแอบอบชิ้นใหม่มาเปลี่ยนให้เมื่อถึงเวลา"

คอนเซ็ปต์:

ยังคงเสิร์ฟหน้าที่สร้างเตรียมไว้ (Cached) ให้ผู้ใช้ไปก่อนเพื่อความเร็ว แต่จะคอย 'อัปเดตข้อมูลเบื้องหลัง' เมื่อถึงเงื่อนไขที่กำหนด โดยไม่ต้อง build ใหม่ทั้งหมด

วิธีเปิดใช้งาน ISR ใน App Router

1. Time-based Revalidation (อัปเดตตามเวลา)

วิธีที่ง่ายที่สุด คือการบอก Next.js ว่า "หน้านี้ควรจะสดใหม่อยู่เสมอ ทุก ๆ X วินาทีนะ"

// บอก Next.js ว่าหน้านี้ให้ revalidate ทุก 60 วินาที
export const revalidate = 60;
 
async function getPost(slug: string) {
  // Next.js จะ cache ผลลัพธ์ของ fetch นี้โดยอัตโนมัติ
  const res = await fetch(`https://api.example.com/posts/${slug}`);
  return res.json();
}
 
export default async function PostPage({ params }: { params: { slug: string } }) {
  const post = await getPost(params.slug);
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

การทำงานของมัน:

1. Request แรก ที่เข้ามายังหน้านี้: ผู้ใช้จะได้รับหน้าที่สร้างแบบ Static (เร็ว!)
2. Request ต่อ ๆ มา (ภายใน 60 วินาที): ทุกคนจะได้รับหน้าที่ cache ไว้
3. Request แรกที่เข้ามา หลังจาก 60 วินาที:
   • ผู้ใช้คนนี้จะยังได้รับหน้า เวอร์ชันเก่า (Stale) ที่ cache ไว้อยู่ทันที (ยังคงเร็ว!)
   • แต่เบื้องหลัง, Next.js จะ "เริ่มสร้างหน้าใหม่" (Revalidation)
   • เมื่อสร้างเสร็จ Cache จะถูกอัปเดต
4. Request ต่อ ๆ ไป: ทุกคนจะได้รับหน้าเวอร์ชันใหม่ล่าสุด!

2. On-Demand Revalidation (สั่งอัปเดตได้ตามใจ)

บางครั้งการรอตามเวลาก็ไม่ทันใจ เราสามารถ "สั่ง" ให้ Next.js อัปเดต Cache ได้ทันทีเมื่อข้อมูลเปลี่ยน! โดยใช้ revalidatePath หรือ revalidateTag

'use server'
 
import { revalidatePath } from 'next/cache'
 
export async function addPostAction(formData: FormData) {
  // ... (โค้ดสำหรับบันทึก post ใหม่ลง DB) ...
 
  // สั่งให้ Next.js เคลียร์ cache ของ path '/posts' และ '/home'
  revalidatePath('/posts')
  revalidatePath('/home') 
}

เมื่อ Server Action นี้ทำงาน, Cache ของ Page ที่ระบุจะถูกลบทันที Request ถัดไปที่เข้ามายัง Page นั้น จะได้รับการ render ใหม่ด้วยข้อมูลล่าสุด! 🔥

สรุป: เลือกใช้ให้ถูกงาน!

ทุกคน สามารถอ่าน docs ของทาง official ได้เพิ่มเติมทีนี้ Incremental Static Regeneration (ISR)

การเข้าใจ SSG และ ISR จะช่วยให้เราออกแบบเว็บ Next.js ที่มี Performance ดีเยี่ยมได้ เริ่มต้นด้วย SSG ให้มากที่สุดเท่าที่จะทำได้ แล้วค่อย ๆ เติมพลังด้วย ISR ในหน้าที่ต้องการความสดใหม่ นี่แหละคือเคล็ดลับในการสร้างเว็บที่ทั้งเร็วและทันสมัยครับ