loading.tsx 和 error.tsx 如何工作？

Question

Accepted Answer

这些是 App Router 中的**特殊文件**，它们自动为路由段提供加载和错误状态 — Next.js 通过 React Suspense 和 Error Boundaries 将它们连接起来，这样你就不用自己编写这些样板代码。 ## loading.tsx — 通过 Suspense 实现即时加载 UI ```tsx // app/dashboard/loading.tsx export default function Loading() { return ; // shown while the page's data is being fetched } ``` Next.js 自动将段的 `page.tsx` 包装在带有此 fallback 的 `` 边界中。因此，当异步 Server Component 等待其数据时，用户立即看到 `loading.tsx` UI — 然后真实内容流入。无需手动管理加载状态。 ```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 ``` ## 为什么这很重要这些文件为你的每个路由**免费**提供了健壮的加载和错误处理 — 基于 Suspense 的加载 UI 可实现流式传输，以及具有重试功能的段作用域错误边界。与其在组件中传递 `isLoading`/`error` 状态，不如直接添加 `loading.tsx` 和 `error.tsx`，让 Next.js 处理连接工作，从而产生一个有韧性、响应迅速的用户体验。