loading.tsx และ error.tsx ทำงานอย่างไร?

Question

Accepted Answer

ไฟล์เหล่านี้เป็น **ไฟล์พิเศษ** ใน App Router ที่ให้การตั้งค่าสถานะการโหลดและข้อผิดพลาดโดยอัตโนมัติสำหรับส่วนเส้นทาง — Next.js เชื่อมต่อพวกเขากับ React Suspense และ Error Boundaries เพื่อให้คุณไม่ต้องเขียนโค้ดที่ซ้ำซ้อนนั้น ## loading.tsx — UI การโหลดทันทีผ่าน Suspense ```tsx // app/dashboard/loading.tsx export default function Loading() { return ; // shown while the page's data is being fetched } ``` Next.js จะห่อ `page.tsx` ของส่วนในขอบเขต `` โดยอัตโนมัติพร้อมกับสิ่งนี้เป็น fallback เมื่อ async Server Component รอข้อมูล ผู้ใช้จะเห็น UI จาก `loading.tsx` ทันที — จากนั้นเนื้อหาจริงจึงไหลเข้า ไม่มีการจัดการสถานะการโหลดด้วยตนเอง ```text User navigates → loading.tsx shows INSTANTLY → data resolves → page replaces it ``` ## error.tsx — ขอบเขตข้อผิดพลาดสำหรับส่วน ```tsx "use client"; // error components MUST be Client Components export default function Error({ error, reset, }: { error: Error; reset: () => void; // retry: re-renders the segment }) { return (

Something went wrong: {error.message}

); } ``` ถ้าหน้า (หรือการดึงข้อมูล) ขว้างข้อผิดพลาด Next.js จะจับได้ด้วย Error Boundary นี้และแสดง `error.tsx` **แทนที่จะทำให้แอปทั้งหมดหยุดทำงาน** ฟังก์ชัน `reset()` ช่วยให้ผู้ใช้ลองใหม่ได้โดยไม่ต้องโหลดใหม่ทั้งหมด ข้อผิดพลาดถูก *จำกัด* ให้อยู่ในส่วน — เลย์เอาต์และส่วนที่เหลือของแอปยังคงสมบูรณ์ ## ไฟล์พิเศษที่เกี่ยวข้อง ```text loading.tsx → Suspense fallback (loading state) error.tsx → error boundary (must be "use client") not-found.tsx → 404 UI (triggered by notFound()) global-error.tsx → catches errors in the root layout itself ``` ## เหตุใดจึงสำคัญ ไฟล์เหล่านี้ให้การจัดการการโหลดและข้อผิดพลาดที่มั่นคงต่อเส้นทาง **ฟรี** — UI การโหลดบนพื้นฐาน Suspense ที่เปิดใช้งานการสตรีมและขอบเขตข้อผิดพลาดที่มีขอบเขตเป็นส่วนพร้อมการลองใหม่ แทนที่จะผ่านสถานะ `isLoading`/`error` ผ่านคอมโพเนนต์ คุณเพียงแค่วาง `loading.tsx` และ `error.tsx` และ Next.js จะจัดการเชื่อมต่อ ซึ่งจะทำให้เกิด UX ที่มีความทนทานและตอบสนองได้