What is the Next.js loading.tsx file?

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.