SSR, SSG และ ISR ใน Next.js คืออะไร

Question

Accepted Answer

นี่คือสามกลยุทธ์หลักสำหรับ *เมื่อ* HTML ของหน้าเว็บถูกสร้างขึ้น การเลือกกลยุทธ์ที่เหมาะสมสำหรับแต่ละหน้าจะสมดุลระหว่างความสดใหม่ประสิทธิภาพ และต้นทุนเซิร์ฟเวอร์ ## SSG — Static Site Generation (ในเวลาสร้าง) ```tsx // HTML generated ONCE during `next build`, then served from CDN export default async function Page() { const posts = await fetch("...", { cache: "force-cache" }).then(r => r.json()); return ; } ``` หน้าเว็บถูกเรนเดอร์ล่วงหน้าเป็น HTML แบบคงที่ระหว่างการสร้างและแคชไว้บน CDN **การส่งมอบที่เร็วที่สุดที่เป็นไปได้** แต่เนื้อหาจะยังคงอยู่จนกว่าจะมีการสร้างครั้งถัดไป เหมาะสำหรับเนื้อหาที่เปลี่ยนแปลงไม่บ่อยนัก หน้าการตลาด เอกสาร โพสต์บล็อก ## SSR — Server-Side Rendering (ในแต่ละคำขอ) ```tsx // HTML generated FRESH on every request export default async function Page() { const data = await fetch("...", { cache: "no-store" }).then(r => r.json()); return ; } ``` เซิร์ฟเวอร์เรนเดอร์หน้าต่อคำขอ ดังนั้นข้อมูลจึงอัปเดตตลอดเวลา — ด้วยค่าใช้จ่ายของการตอบสนองที่ช้าลงและความเสี่ยงต่อเซิร์ฟเวอร์ในการเยี่ยมชมแต่ละครั้ง เหมาะสำหรับข้อมูลส่วนบุคคลหรือข้อมูลที่อัปเดตตลอดเวลา แดชบอร์ด หน้าบัญชี ผลการค้นหา ## ISR — Incremental Static Regeneration (โครงสร้างแบบผสมผสาน) ```tsx // Static, but automatically rebuilt in the background every N seconds export const revalidate = 60; // regenerate at most once per 60s export default async function Page() { const products = await fetch("...", { next: { revalidate: 60 } }).then(r => r.json()); return ; } ``` ISR ให้บริการ HTML แบบคงที่ (เร็ว แคชบน CDN) แต่ **ตรวจสอบความถูกต้อง** ในพื้นหลังตามตารางเวลา — ดังนั้นคุณจึงได้รับประสิทธิภาพแบบคงที่พร้อมข้อมูลที่สดใหม่เป็นระยะ โดยไม่ต้องสร้างไซต์ทั้งหมดใหม่ เหมาะสำหรับเนื้อหาที่เปลี่ยนแปลงเป็นครั้งคราว รายการผลิตภัณฑ์ ข่าวสาร ลีดเดอร์บอร์ด ## การเปรียบเทียบ ```text Speed Freshness Server cost Use for SSG fastest build-time only none docs, marketing SSR slower always fresh every request dashboards, personalized ISR fast every N seconds occasional catalogs, news ``` ## เหตุใดจึงสำคัญ ใน App Router คุณเลือกสิ่งเหล่านี้ต่อการดึงข้อมูลผ่านตัวเลือก cache (`force-cache` = SSG, `no-store` = SSR, `revalidate` = ISR) มากกว่าฟังก์ชันพิเศษ การทำความเข้าใจการแลกเปลี่ยน — แบบคงที่เร็วที่สุด แต่เก่า SSR เป็นข้อมูลใหม่แต่มีราคาแพง ISR สมดุลทั้งสองอย่าง — ช่วยให้คุณปรับแต่งแต่ละหน้าให้มีประสิทธิภาพและความสดใหม่ของข้อมูลอย่างเหมาะสม