Hogyan működik a loading.tsx és az error.tsx?

Question

IT Interview Practice · Accepted Answer

Ezek az App Router **speciális fájljai**, amelyek automatikusan betöltési és hibaállapotokat biztosítanak egy útvonalszegmenshez — a Next.js a React Suspense és az Error Boundaries segítségével kapcsolja össze őket, így nem kell megírnia ezt a boilerplate kódot. ## loading.tsx — azonnali betöltési felhasználói felület Suspense-en keresztül ```tsx // app/dashboard/loading.tsx export default function Loading() { return ; // shown while the page's data is being fetched } ``` A Next.js automatikusan becsomagolja a szegmens `page.tsx`-ét egy `` határba ezzel fallback-ként. Tehát amíg egy aszinkron Server Component várakozik az adataira, a felhasználó azonnal látja a `loading.tsx` felhasználói felületet — majd a valódi tartalom streamelődik. Nincs manuális betöltési állapot kezelése. ```text User navigates → loading.tsx shows INSTANTLY → data resolves → page replaces it ``` ## error.tsx — error boundary a szegmenshez ```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}

); } ``` Ha az oldal (vagy adatlekérése) hibát dob, a Next.js elkülöníti ezt az Error Boundary-val és a `error.tsx`-t jeleníti meg **ahelyett, hogy az egész alkalmazást összetörné**. A `reset()` függvény lehetővé teszi a felhasználónak, hogy teljes újratöltés nélkül újra próbálkozzon. A hibák *az adott* szegmensre korlátozódnak — az elrendezés és az alkalmazás többi része sértetlen marad. ## Kapcsolódó speciális fájlok ```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 ``` ## Miért fontos ez Ezek a fájlok **ingyenes** szegmensenkénti robusztus betöltési és hibakezelést nyújtanak — a streamelést lehetővé tevő Suspense-alapú betöltési felhasználói felület és szegmenshatárokú error boundaries újrapróbálási lehetőséggel. Ahelyett, hogy az `isLoading`/`error` állapotot átadná az összetevőkön keresztül, helyezze el a `loading.tsx`-t és az `error.tsx`-t, és a Next.js gondoskodik az összekapcsolásról, létrehozva egy rugalmas, reszponzív felhasználói felületet.

loading.tsx — azonnali betöltési felhasználói felület Suspense-en keresztül

error.tsx — error boundary a szegmenshez

Kapcsolódó speciális fájlok

Miért fontos ez

Kapcsolódó kérdések