mcpField
C
client-vs-server

client-vs-server

github.com/tanstack开发28.5k38 次安装1 周前更新
代码仓库

关于 client-vs-server

面向 TanStack Table 的技能，说明如何选择客户端或服务器端行处理。重点介绍筛选、排序和分页的处理归属、手动模式行为及稳定的数据引用。

主要功能

  1. 01比较客户端与服务器端处理流程
  2. 02配置手动筛选、排序和分页
  3. 03保持数据与列引用稳定
  4. 04识别常见行模型错误

适用场景

  1. 01选择表格筛选和排序的执行位置
  2. 02正确实现服务器端分页
  3. 03避免行模型反复失效

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/tanstack/table --skill client-vs-server

安装后在 Claude Code 中输入/client-vs-server确认已加载。

详细介绍

本技能基于 core 和 table-features 构建。请先阅读它们，了解模型管线和插件插槽。

设置

import {
  rowPaginationFeature,
  rowSortingFeature,
  tableFeatures,
} from '@tanstack/table-core'

export const features = tableFeatures({
  rowSortingFeature,
  rowPaginationFeature,
})
export const serverOptions = {
  manualSorting: true,
  manualPagination: true,
  rowCount: 12_450,
} as const

核心模式

客户端掌控完整管线
const features = tableFeatures({
  columnFilteringFeature,
  filteredRowModel: createFilteredRowModel(),
  rowSortingFeature,
  sortedRowModel: createSortedRowModel(),
  rowPaginationFeature,
  paginatedRowModel: createPaginatedRowModel(),
})

传入完整的客户端数据集，使每个阶段都能处理所有行。

服务端掌控处理
const options = {
  data: serverPage.rows,
  manualFiltering: true,
  manualSorting: true,
  manualPagination: true,
  rowCount: serverPage.total,
}

将受控的筛选、排序和分页状态放入请求/查询键中。

常见错误

[CRITICAL] 将手动标志视为请求

错误写法：

const options = { manualSorting: true, data: unsortedRows }

正确写法：

const sortedPage = await fetchPage({ sorting })
const options = { manualSorting: true, data: sortedPage.rows }

manualSorting 只会跳过客户端排序，绝不会调用后端。

来源：packages/table-core/src/features/row-sorting/rowSortingFeature.types.ts

[HIGH] 期望手动分页自动切片

错误写法：

const options = { data: allRows, manualPagination: true }

正确写法：

const page = await fetchPage({ pageIndex, pageSize })
const options = {
  data: page.rows,
  manualPagination: true,
  rowCount: page.rowCount,
}

手动分页假定 data 已经代表目标页。请直接传入稳定的页面结果。如果应用有意执行自定义本地切片，请使用框架的 memo/computed 原语进行派生，并保持引用稳定，直到其实际输入发生变化。

来源：docs/framework/react/guide/pagination.md#manual-server-side-pagination

[HIGH] 意外地只对已加载的页面排序

错误写法：

const options = {
  data: serverPage.rows,
  manualPagination: true,
  manualSorting: false,
}

正确写法：

const options = {
  data: serverPage.rows,
  manualPagination: true,
  manualSorting: true,
}

客户端排序只能看到已加载的行，因此无法产生数据库范围内的排序结果。

来源：docs/guide/row-models.md

[HIGH] 在行内重复创建已处理的数据或列

错误写法：

const options = {
  data: allRows.filter(matchesFilters).slice(pageStart, pageEnd),
  columns: makeColumns(),
}

正确写法：

const processedRows = pageResult.rows
const columns = sharedColumns
const options = { data: processedRows, columns }

data 和 columns 是模型的输入。在有意义的变更之间，应通过模块常量、状态或适配器的 memo/computed 原语保持两者引用稳定；否则 Table 会反复使行模型和列模型失效，部分适配器可能进入渲染循环。“手动”描述的是处理的归属，并不意味着可以在表格选项中派生新数组。

来源：docs/guide/data.md

API 探索

请查看 node_modules/@tanstack/table-core/dist/core/row-models/coreRowModelsFeature.utils.d.ts 了解管线顺序，并查看每个功能的 .types.d.ts 了解其 manual* 约定。

评论

支持 Markdown