React Academy · บทเรียน

การสร้างสถิตแบบเพิ่มทีละส่วน (ISR)

สร้างหน้าสถิตใหม่ตามกำหนดเวลาหรือเมื่อเรียกใช้ โดยไม่ต้องนำระบบขึ้นใหม่ทั้งหมด

การสร้างสถิตแบบเพิ่มทีละส่วน (ISR) เป็นบทเรียน React Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน React Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส React Academy มีบทเรียนทั้งหมด 4 บทเรียน

ISR คืออะไร

การสร้างสแตติกใหม่แบบเพิ่มทีละส่วนช่วยให้ Next.js ส่งหน้าสแตติกที่สร้างไว้ล่วงหน้าได้ ขณะเดียวกันก็สร้างหน้าใหม่ในเบื้องหลังหลังผ่านช่วงเวลาที่กำหนด ซึ่งเป็นการรวมความเร็วของ HTML แบบสแตติกเข้ากับความสดใหม่ของการเรนเดอร์ฝั่งเซิร์ฟเวอร์

ISR ทำงานอย่างไร

ในการ请求ครั้งแรก Next.js จะส่ง HTML แบบสแตติกที่แคชไว้ หลังช่วงเวลาตรวจสอบความถูกต้องใหม่หมดอายุ คำขอถัดไปจะเรียกการสร้างหน้าใหม่ในเบื้องหลัง คำขอถัดจากนั้นจะได้รับหน้าใหม่เมื่อการสร้างเสร็จสมบูรณ์

เปิดใช้ ISR ด้วย revalidate

ส่งออกค่าคงที่ revalidate หรือตั้งค่า next: { revalidate: N } ในการเรียก fetch ภายในหน้าคอมโพเนนต์ฝั่งเซิร์ฟเวอร์

// app/blog/page.tsx
export const revalidate = 60; // regenerate at most every 60 seconds

export default async function BlogPage() {
  const posts = await getPosts();
  return <PostList posts={posts} />;
}

ISR กับเส้นทางแบบไดนามิก

ใช้ generateStaticParams ร่วมกับ revalidate เพื่อสร้างหน้าที่มีการเปลี่ยนแปลงแบบไดนามิกซึ่งได้รับความนิยมไว้ล่วงหน้า และตรวจสอบหน้าเหล่านั้นใหม่ตามกำหนดเวลา

// app/blog/[slug]/page.tsx
export const revalidate = 3600; // hourly

export async function generateStaticParams() {
  const posts = await getTopPosts(100);
  return posts.map(p => ({ slug: p.slug }));
}

export default async function PostPage({ params }) {
  const post = await getPost(params.slug);
  return <Article post={post} />;
}

การตรวจสอบความถูกต้องใหม่ตามคำขอ

เรียกใช้ revalidatePath() หรือ revalidateTag() จาก Server Action เส้นทาง API หรือตัวจัดการเว็บฮุก เพื่อสร้างหน้าเฉพาะใหม่ทันที โดยไม่ต้องรอช่วงเวลา

// app/api/revalidate/route.ts
import { revalidatePath } from 'next/cache';

export async function POST(req: Request) {
  const { secret, path } = await req.json();
  if (secret !== process.env.REVALIDATION_SECRET) {
    return Response.json({ error: 'Invalid secret' }, { status: 401 });
  }
  revalidatePath(path);
  return Response.json({ revalidated: true, path });
}

พฤติกรรมสำรองสำหรับเส้นทางที่ไม่รู้จัก

สำหรับเส้นทางแบบไดนามิกที่ไม่ได้อยู่ใน generateStaticParams ให้ตั้งค่า dynamicParams = true (ค่าเริ่มต้น) เพื่อเรนเดอร์ตามคำขอและแคชไว้ หรือตั้งค่าเป็น false เพื่อส่งคืน 404

// app/blog/[slug]/page.tsx
export const dynamicParams = true; // default: render and cache unknown slugs
// export const dynamicParams = false; // return 404 for paths not in generateStaticParams

ส่งข้อมูลเก่าระหว่างตรวจสอบใหม่

ระหว่างการสร้างหน้าใหม่ Next.js จะส่งหน้าที่มีข้อมูลเก่าไปก่อนจนกว่าเวอร์ชันใหม่จะพร้อม ผู้ใช้จะได้รับการตอบกลับเสมอ โดยไม่ต้องรอข้อมูลล่าสุด

ISR เทียบกับ SSR และสแตติก

Static: สร้างครั้งเดียวและไม่เปลี่ยนแปลง ISR: สร้างไว้ล่วงหน้าและสร้างใหม่ตามกำหนดเวลา SSR: เรนเดอร์ใหม่ทุกคำขอ เลือก ISR สำหรับเนื้อหาที่เปลี่ยนแปลงเป็นครั้งคราว แต่ยังได้ประโยชน์จากความเร็วของการส่งแบบสแตติก

ข้อควรระวังของ ISR

ISR ไม่เหมาะสำหรับเนื้อหาเฉพาะบุคคล (ข้อมูลเฉพาะผู้ใช้) หรือข้อมูลที่ต้องเป็นข้อมูลปัจจุบันแบบเรียลไทม์ สำหรับกรณีเหล่านี้ ให้ใช้การเรียก fetch แบบ no-store และ SSR

ISR ในเราเตอร์แบบหน้า (getStaticProps)

ในเราเตอร์แบบหน้า ISR จะใช้ getStaticProps ร่วมกับค่าที่ส่งคืน revalidate ซึ่งเป็นแนวคิดเดียวกันแต่ใช้ API คนละแบบ

// pages/blog.tsx (Pages Router)
export async function getStaticProps() {
  const posts = await getPosts();
  return { props: { posts }, revalidate: 60 };
}

ตรวจสอบ ISR

ตรวจสอบส่วนหัวการตอบกลับ x-nextjs-cache: HIT หมายถึงส่งจากแคช, MISS หมายถึงเรนเดอร์ใหม่ และ STALE หมายถึงส่งข้อมูลเก่าระหว่างการตรวจสอบความถูกต้องใหม่

ตรวจสอบความเข้าใจ

จะเกิดอะไรขึ้นเมื่อผู้ใช้ขอหน้า ISR ที่ช่วงเวลาตรวจสอบความถูกต้องใหม่เพิ่งหมดอายุ

สรุป

ISR จะสร้างหน้าล่วงหน้าและตรวจสอบหน้าใหม่ทุก N วินาทีด้วย export const revalidate = N ใช้ generateStaticParams สำหรับเส้นทางแบบไดนามิกที่ได้รับความนิยม และใช้การตรวจสอบความถูกต้องใหม่ตามคำขอผ่าน revalidatePath/Tag เพื่อให้ข้อมูลใหม่ทันทีหลังการเปลี่ยนแปลงข้อมูล

คำถามที่พบบ่อย

บทเรียน “การสร้างสถิตแบบเพิ่มทีละส่วน (ISR)” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การสร้างสถิตแบบเพิ่มทีละส่วน (ISR)” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส React Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส React Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การสร้างสถิตแบบเพิ่มทีละส่วน (ISR)”

สร้างหน้าสถิตใหม่ตามกำหนดเวลาหรือเมื่อเรียกใช้ โดยไม่ต้องนำระบบขึ้นใหม่ทั้งหมด คุณปฏิบัติ React Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน React Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน React Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “การสร้างสถิตแบบเพิ่มทีละส่วน (ISR)” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน React Academy นี้ได้ไหม

ได้ บทเรียน React Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

fetch() พร้อมตัวเลือกแคชใน Next.js
unstable_cache และ React cache()
การสร้างสถิตแบบเพิ่มทีละส่วน (ISR)
Server Actions สำหรับการเปลี่ยนแปลงข้อมูล

← กลับไปที่ React Academy