Next.js14中Tanstack React Table使用Server Component的架构问题及修复

背景回顾 #

你用Tanstack React Table实现客户表的分页、筛选功能，想在某一列展示客户报告摘要这类额外数据，尝试通过在客户端列定义中嵌套服务端组件来获取数据，但遇到两个问题：

1. 运行时错误：Unhandled Runtime Error Error: async/await is not yet supported in Client Components, only Server Components...
2. 控制台警告：Warning: Cannot update a component (Router) while rendering a different component (proxy)...

核心疑问解答 #

1. 当前架构是否合理？ #

不合理。核心问题在于你把异步服务端组件直接嵌套在了客户端组件的循环渲染逻辑（表格列渲染）中：

• Tanstack Table的列定义是客户端组件（带'use client'），其渲染逻辑运行在客户端上下文，而服务端组件的异步async/await逻辑无法在这个上下文里直接执行，这直接导致了第一个报错。
• 表格行是循环渲染的，每一行都调用服务端组件会触发大量并发的服务端RPC调用，打乱React的渲染时序，进而引发第二个Router更新冲突的警告。

2. 是否应改用客户端获取行相关的额外数据？ #

视场景而定，这是可行方案之一，也有更优的服务端预加载方案：

• 客户端获取（适合小数据量场景）：如果当前分页的客户数量不多（比如几十条），可以在客户端用React Query/SWR这类数据缓存库，批量或按需获取报告数据，缓存后匹配行ID渲染。这种方式适配客户端异步逻辑，避免服务端组件的渲染冲突。
• 服务端预加载（适合数据敏感/复杂逻辑场景）：直接在Dashboard.tsx（服务端组件）中，拿到当前分页的客户ID列表后，批量预获取所有对应的报告数据，把客户基础数据和报告数据合并后再传给DataTable。客户端直接渲染预加载好的数据，没有异步请求，体验更流畅。

3. 当前方案能否修复？ #

可以修复，但需要调整结构，提供两种可行方案：

方案1：服务端预加载数据（推荐）

把报告数据的获取逻辑提到最上层的服务端组件Dashboard.tsx中，批量获取后合并到客户数据：

// Dashboard.tsx（服务端组件）
async function getCustomersWithReports(page: number, pageSize: number) {
  // 1. 获取当前分页的客户基础数据
  const customers = await fetchCustomers(page, pageSize);
  // 2. 批量获取这些客户的报告数据
  const customerIds = customers.map(c => c.id);
  const reports = await fetchCustomerReports(customerIds);
  // 3. 合并数据：把报告匹配到对应的客户对象
  return customers.map(customer => ({
    ...customer,
    report: reports.find(r => r.customerId === customer.id)
  }));
}

export default async function Dashboard() {
  const customersWithReports = await getCustomersWithReports(1, 10); // 替换成实际分页参数
  return <DataTable data={customersWithReports} />;
}

然后在columns.tsx的客户端列定义中，直接从行数据里读取预加载好的报告：

// columns.tsx（客户端组件）
const columns = [
  // 其他列...
  {
    header: '报告摘要',
    cell: ({ row }) => <div>{row.original.report?.summary || '无报告'}</div>,
  },
];

彻底避免客户端渲染时调用异步服务端组件的问题，同时解决两个报错/警告。

方案2：改用Server Action + 客户端数据缓存

如果必须在客户端处理异步获取，把服务端组件改成Server Action，用React Query/SWR来管理异步逻辑：

// row-reports.tsx（Server Action）
'use server'
export async function getCustomerReport(customerId: string) {
  // 这里实现获取单个客户报告的服务端逻辑
  const report = await fetch(`/api/customers/${customerId}/report`).then(res => res.json());
  return report;
}

然后在客户端列定义中用React Query调用这个Action：

// columns.tsx（客户端组件）
'use client'
import { useQuery } from '@tanstack/react-query';
import { getCustomerReport } from './row-reports';

const columns = [
  // 其他列...
  {
    header: '报告摘要',
    cell: ({ row }) => {
      const { data: report, isLoading } = useQuery({
        queryKey: ['customer-report', row.original.id],
        queryFn: () => getCustomerReport(row.original.id),
      });
      
      if (isLoading) return <span>加载中...</span>;
      return <span>{report?.summary || '无报告'}</span>;
    },
  },
];

这种方式把异步逻辑交给数据缓存库处理，避免在组件渲染阶段直接执行async/await，解决第一个报错；同时缓存机制也能减少重复请求，避免渲染时序冲突引发的Router警告。

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