Route Segment Config และ Runtime

ไอเดียในหนึ่งประโยค

Route Segment Config คือชุดของค่า export const ระดับไฟล์ ที่ให้คุณ override ว่า route segment เดียว render, cache และรันบน runtime ไหน

segment config exports

แต่ละตัวเป็น named export อยู่บนสุดของ layout.tsx, page.tsx หรือ route.ts มีผลกับ segment นั้นและลูกของตัวเอง

// app/blog/page.tsx — route segment config exports
export const dynamic = 'auto';       // 'auto' | 'force-dynamic' | 'error' | 'force-static'
export const revalidate = 3600;      // ISR: rebuild this route at most once per hour
export const runtime = 'nodejs';     // 'nodejs' (default) | 'edge'
export const fetchCache = 'auto';    // control the default caching of fetch() in this segment
export const dynamicParams = true;   // allow params not returned by generateStaticParams

dynamic — บังคับ mode ของการ render 'force-dynamic' render ทุก request ส่วน 'force-static' ห้ามใช้ dynamic API
revalidate — จำนวนวินาทีระหว่างการ rebuild เบื้องหลัง นี่คือวิธีเปิด ISR
runtime — สภาพแวดล้อมที่รัน 'nodejs' หรือ 'edge'
fetchCache — override ว่า fetch() ใน segment นี้ถูก cache เป็น default ยังไง
dynamicParams — เมื่อเป็น false param ที่ไม่อยู่ในลิสต์ของ generateStaticParams จะคืน 404 แทนที่จะ render ตอน request

Node.js runtime กับ Edge runtime

ทุก route รันบน runtime หนึ่งในสอง ตัว default คือ Node.js ให้ Node API เต็มชุด ส่วน Edge runtime เป็นสภาพแวดล้อมที่เล็กกว่า start เร็วกว่า และรันใกล้ผู้ใช้ แลกกับชุด API ที่จำกัด

// Opt a route into the Edge runtime
export const runtime = 'edge';

เลือกตามสิ่งที่ route ต้องการ —

Node.js (default) — Node API เต็ม, native module, library ใหญ่ ๆ, database driver เลือกเมื่อคุณต้องการ ecosystem ทั้งหมดหรืองานหนัก
Edge — bundle เล็ก, cold start เกือบเป็นศูนย์, รันใกล้ผู้ใช้เชิงภูมิศาสตร์ เลือกสำหรับ route เบา ๆ ที่ไวต่อ latency เช่น personalization, redirect หรือ auth check ง่าย ๆ ตราบใดที่อยู่ในชุด Edge API ที่จำกัด

ISR ผ่าน revalidate

Incremental Static Regeneration ทำให้ route ยัง static และเร็ว แต่ยอมให้ content stale ได้แล้ว refresh ตามเวลา ตั้ง revalidate เป็นจำนวนวินาที Next.js จะเสิร์ฟ static page ที่ cache ไว้ แล้ว rebuild เบื้องหลังหลังพ้นช่วงนั้น

// app/products/page.tsx — serve static, refresh in the background every 60s
export const revalidate = 60;

export default async function Products() {
  const products = await fetch('https://api.example.com/products').then((r) => r.json());
  return <ul>{products.map((p) => <li key={p.id}>{p.name}</li>)}</ul>;
}

request แรกหลังพ้น 60 วินาทีจะ trigger การ rebuild เบื้องหลัง ผู้เข้าชมยังได้ page ที่ cache ไว้แบบเร็วต่อไปจนกว่าอันใหม่จะพร้อม

flowchart TD
  A[Route segment config] --> B[dynamic]
  A --> C[revalidate for ISR]
  A --> D[runtime]
  D --> E[nodejs, full APIs, default]
  D --> F[edge, small, fast cold start, limited APIs]

Route segment config and the two runtimes