基于ID的仪表盘API调用优化与加载策略技术问询

我正在开发一个基于ID的订单概览系统，项目结构如下：

app
| page.tsx
| layout.tsx
| [id]
| | layout.tsx
| | dashboard
| | | page.tsx
| | purchases
| | |...
| api
| | getOrderData/[orderData]
...

app目录下的起始页通过组件填充URL中的ID，从而重定向至仪表盘页面。

我希望按页面分别调用API以实现加载优化，每个页面（dashboard、purchases等）都有独立的API调用，需在起始页输入订单号或在仪表盘头部更改订单号时触发。

但目前我需要通过useParams()获取URL中的ID，这导致页面必须是客户端组件，与fetch调用存在冲突。我了解useEffect()，但想知道是否有更优的加载方式，是否必须在每个页面都使用useEffect？

另外，我应该加载整个页面，还是仅用Suspense包裹展示数据的部分？

当前我使用的代码如下：

export default function dashboard() {
    const [data,setData] = useState<cards[]>([])
    const params = useParams<{ orderNo: string }>();
    const { orderNo } = params;
    useEffect(()=>{
    async function loadData(){
         const res = await fetchData(orderNo)
         setData(res)
      }
      loadData()
    },[orderNo])

    return ... 
}

fetchData是我lib目录中用于调用本地API路由的函数，<CardsDisplay cards={data} />是展示数据的组件。

一、替代useEffect的更优加载方案 #

你完全不需要在每个页面都用useEffect，利用Next.js App Router的服务器组件特性就能解决客户端组件与fetch的冲突问题，推荐两种方案：

1. 服务器组件直接获取数据（优先推荐） #

把页面本身做成服务器组件，服务器组件可以直接通过params获取URL中的ID，无需useParams()，并且能直接在组件内部异步调用API获取数据，然后传给展示组件：

// app/[id]/dashboard/page.tsx
import CardsDisplay from './CardsDisplay';
import fetchData from '@/lib/fetchData';

export default async function DashboardPage({ params }: { params: { id: string } }) {
  const orderNo = params.id;
  // 服务器端直接调用API，自动支持缓存
  const data = await fetchData(orderNo);

  return <CardsDisplay cards={data} />;
}

如果需要客户端交互（比如头部更改订单号），单独拆分出一个客户端组件处理路由跳转即可：

// app/[id]/layout.tsx（服务器组件）
import OrderHeader from './OrderHeader';

export default function OrderLayout({ children, params }: { children: React.ReactNode; params: { id: string } }) {
  return (
    <div>
      {/* 客户端组件处理订单号切换 */}
      <OrderHeader currentOrderNo={params.id} />
      {children}
    </div>
  );
}

// app/[id]/OrderHeader.tsx（客户端组件）
'use client';
import { useState } from 'react';
import { useRouter } from 'next/navigation';

export default function OrderHeader({ currentOrderNo }: { currentOrderNo: string }) {
  const [inputOrderNo, setInputOrderNo] = useState(currentOrderNo);
  const router = useRouter();

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (inputOrderNo.trim()) {
      // 跳转路由更新URL，服务器组件自动重新获取数据
      router.push(`/${inputOrderNo}/dashboard`);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={inputOrderNo}
        onChange={(e) => setInputOrderNo(e.target.value)}
      />
      <button type="submit">切换订单</button>
    </form>
  );
}

这种方式既保留了客户端交互能力，又让数据获取在服务器端完成，避免了useEffect的副作用，还能利用Next.js的缓存机制提升性能。

2. 客户端组件用use钩子替代useEffect #

如果确实需要在客户端组件内获取数据（比如实时更新场景），可以用React的use钩子（Next.js 13+支持）直接处理Promise，无需useState和useEffect：

'use client';
import { use } from 'react';
import { useParams } from 'next/navigation';
import fetchData from '@/lib/fetchData';
import CardsDisplay from './CardsDisplay';

export default function DashboardPage() {
  const params = useParams<{ id: string }>();
  const orderNo = params.id;
  // use钩子直接处理fetch返回的Promise，React自动处理加载状态
  const data = use(fetchData(orderNo));

  return <CardsDisplay cards={data} />;
}

二、页面加载策略选择 #

推荐用Suspense包裹数据展示部分 #

如果页面存在不需要等待数据的内容（比如导航栏、页面标题、筛选控件），用Suspense包裹数据展示组件可以让非数据部分先渲染，减少用户等待感，提升体验：

// app/[id]/dashboard/page.tsx（服务器组件示例）
import { Suspense } from 'react';
import CardsDisplay from './CardsDisplay';
import fetchData from '@/lib/fetchData';

// 单独拆分数据获取组件
async function CardsData({ orderNo }: { orderNo: string }) {
  const data = await fetchData(orderNo);
  return <CardsDisplay cards={data} />;
}

export default function DashboardPage({ params }: { params: { id: string } }) {
  const orderNo = params.id;

  return (
    <div>
      <h1>订单仪表盘</h1>
      {/* 非数据内容先渲染 */}
      <Suspense fallback={<div>加载中...</div>}>
        <CardsData orderNo={orderNo} />
      </Suspense>
    </div>
  );
}

如果整个页面的核心内容都依赖数据，整页加载也可行，但Suspense提供的加载占位符能避免空白页面，用户体验更好。

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