What is the Next.js loading.tsx file?
Why Interviewers Ask This
Interviewers use this question to quickly assess whether a candidate has the foundational knowledge required for Next.js development. It reveals whether you understand the building blocks that more complex concepts rely on.
Answer
The loading.tsx file in the App Router automatically wraps the page in a React Suspense boundary, showing its content as a loading state while the page is being rendered. It enables streaming SSR — the layout is sent immediately while the page content is still being fetched/generated. Creating a loading state: // app/dashboard/loading.tsx export default function Loading() { return <div className="spinner">Loading dashboard...</div>; }. When the user navigates to /dashboard, Next.js immediately shows the loading component while page.tsx is being server-rendered and data is being fetched. Once ready, the page content replaces the loading state. How it works: Next.js generates: <Layout> <Suspense fallback={<Loading />}> <Page /> </Suspense> </Layout>. The layout (including navigation) renders instantly, loading spinner shows, then page content streams in. Granular loading states: instead of page-level loading, use Suspense directly in your component tree for more granular loading states: <Suspense fallback={<Skeleton />}><UserList /></Suspense>. Streaming: each Suspense boundary streams independently — the first parts of the page show immediately, later parts stream in as they're ready. This dramatically improves perceived performance (Time to First Byte of content). Instant loading states: navigation shows loading.tsx immediately, preventing the "stuck" feeling during navigation.
Pro Tip
Before answering, structure your response: one-line definition → real-world analogy → concrete example from a project. This makes even complex Next.js answers easy to follow.