Next.js 13中如何在页面函数外获取数据时设置加载状态？

在使用异步页面组件（比如Next.js App Router中的Page组件）时，若数据获取逻辑在页面函数外部，可通过以下几种方式追踪加载状态并反馈给用户：

方法1：使用框架原生的加载 fallback（推荐） #

像Next.js这类框架会自动处理异步页面的加载状态，只需在页面所在目录下创建loading.js文件，框架会在数据获取期间展示该组件：

// loading.js
export default function Loading() {
  return <div>正在加载数据...</div>;
}

这种方式无需手动管理状态，是页面级加载状态的最优解。

方法2：用Suspense实现区块级加载状态 #

如果需要针对页面中的特定数据区块单独展示加载状态，可以将数据获取逻辑拆分到独立组件中，并用Suspense包裹：

// components/DataSection.js（服务器组件）
import getData from '../getData';

async function DataSection() {
  const data = await getData();
  return <div>{/* 渲染数据内容 */}</div>;
}

// Page.js
import { Suspense } from 'react';
import DataSection from './components/DataSection';

export default function Page() {
  return (
    <main>
      <Suspense fallback={<div>正在加载数据区块...</div>}>
        <DataSection />
      </Suspense>
    </main>
  );
}

方法3：客户端手动管理加载状态 #

若需要完全自主控制加载、错误、数据状态，可以将页面标记为客户端组件，使用useState和useEffect追踪状态：

'use client'; // 标记为客户端组件

import { useState, useEffect } from 'react';
import getData from './getData';

export default function Page() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const result = await getData();
        setData(result);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  if (loading) return <div>加载中...</div>;
  if (error) return <div>加载失败：{error}</div>;

  return <main>{/* 渲染数据 */}</main>;
}

各方法对比 #

• 框架原生方式：最简单，适合整页加载场景，保留服务器渲染优势。
• Suspense方式：灵活实现区块级加载，仍支持服务器渲染。
• 客户端手动管理：完全控制状态，但失去服务器渲染的性能优化。

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