Next.js 13（App目录）加载页面实现问题求助

问题核心原因 #

1. 根布局直接用Suspense无效：Next.js 13 App目录中，根RootLayout作为应用入口，初始化阶段不会触发Suspense的fallback状态，需要将Suspense放在具体页面或子布局中。
2. 缺少异步触发条件：Suspense仅在子组件存在异步加载行为（如async/await数据请求、动态导入组件）时才会显示加载内容，同步渲染的页面不会触发。

修复步骤与优化方案 #

1. 简化Loading组件（可选）

你当前的Loading组件嵌套了两层，可简化为单一组件减少冗余：

// components/loading/Loading.js
export default function Loading() {
  return (
    <div className="loading w-screen h-screen bg-red-100">
      <p>Loading...</p>
    </div>
  );
}

2. 针对具体页面使用Suspense

如果页面包含异步数据请求，在页面组件内包裹Suspense：

// app/page.js
import { Suspense } from 'react';
import Loading from '@/components/loading/Loading';

// 带异步请求的页面内容组件
async function PageContent() {
  // 模拟异步数据获取
  const data = await fetch('https://api.example.com/data').then(res => res.json());
  return <div>{data.content}</div>;
}

export default function Home() {
  return (
    <Suspense fallback={<Loading />}>
      <PageContent />
    </Suspense>
  );
}

3. 利用Next.js内置Loading组件（推荐）

App目录支持在页面目录下创建loading.js，自动作为该页面的加载状态，无需手动写Suspense：

// app/loading.js
export default function Loading() {
  return (
    <div className="loading w-screen h-screen bg-red-100">
      <p>Loading...</p>
    </div>
  );
}

当导航到该页面时，若页面存在异步加载，Next.js会自动显示这个组件，直到内容加载完成。

4. 子布局中统一处理加载状态

如果多个页面需要加载状态，可创建子布局包裹Suspense：

// app/dashboard/layout.js
import { Suspense } from 'react';
import Loading from '@/components/loading/Loading';

export default function DashboardLayout({ children }) {
  return (
    <div className="dashboard-layout">
      <Suspense fallback={<Loading />}>
        {children}
      </Suspense>
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Omar