App Router convention files loading.tsx and error.tsx provide instant loading UI and error recovery without boilerplate in every page.
Common Interview Questions
Q: loading.tsx behavior?
Answer: Automatically wraps page in React Suspense boundary. Shows fallback during async Server Component data fetching for that segment.
Q: error.tsx requirements?
Answer: Must be Client Component. Catches errors in child Server/Client components during render. reset() re-renders segment.
"use client";
export default function Error({ error, reset }) {
return (
<div>
<p>{error.message}</p>
<button onClick={() => reset()}>Try again</button>
</div>
);
}
Q: error.tsx vs not-found?
Answer: error.tsx handles unexpected errors (500-like). notFound() triggers not-found.tsx for expected missing resources (404).
Q: Granularity strategy?
Answer: Place loading/error at route segment level — dashboard shell loads fast while heavy table segment streams in with its own fallback.
Key Points for Interviews
-
loading.tsx = Suspense fallback convention
-
error.tsx = error boundary convention
-
reset() retries rendering failed segment
-
Nest at layout levels for isolated failures
-
global-error.tsx for root layout errors