AG-Grid SSRM问题：加载倒数第二页时触发大量服务器请求

问题现象 #

使用Ag-Grid 29.3.4的服务端分页模式时，执行以下操作会触发大量服务器请求：

• 加载表格，第一页显示正常
• 跳转到最后一页，数据显示符合预期
• 切换至倒数第二页，浏览器网络面板出现大量HTTP请求

本质原因 #

Ag-Grid默认从起始页（第一页）计算页面偏移量，而非基于已加载的最后一页做校验。当用户从最后一页切换到倒数第二页时，网格会判定中间所有页面的数据未缓存，进而发起请求加载这些页面，导致大量请求产生。

复现代码 #

import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';
import {
  ColDef,
  GridReadyEvent,
  IServerSideDatasource,
  RowModelType,
} from 'ag-grid-community';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';
import 'ag-grid-enterprise';
import { IOlympicData } from './interfaces';

declare var FakeServer: any;

@Component({
  selector: 'my-app',
  template: `<ag-grid-angular
    style="width: 100%; height: 100%;"
    class="ag-theme-alpine-dark"
    [columnDefs]="columnDefs"
    [defaultColDef]="defaultColDef"
    [rowModelType]="rowModelType"
    [pagination]="true"
    [paginationPageSize]="paginationPageSize"
    [cacheBlockSize]="cacheBlockSize"
    [animateRows]="true"
    [rowData]="rowData"
    (gridReady)="onGridReady($event)"
  ></ag-grid-angular> `,
})
export class AppComponent {
  public columnDefs: ColDef[] = [
    { field: 'id', maxWidth: 75 },
    { field: 'athlete', minWidth: 190 },
    { field: 'age' },
    { field: 'year' },
    { field: 'gold' },
    { field: 'silver' },
    { field: 'bronze' },
  ];
  public defaultColDef: ColDef = {
    flex: 1,
    minWidth: 90,
    resizable: true,
  };
  public rowModelType: RowModelType = 'serverSide';
  public paginationPageSize = 10;
  public cacheBlockSize = 10;
  public rowData!: IOlympicData[];

  constructor(private http: HttpClient) {}

  onGridReady(params: GridReadyEvent<IOlympicData>) {
    this.http
      .get<IOlympicData[]>(
        'https://www.ag-grid.com/example-assets/olympic-winners.json'
      )
      .subscribe((data) => {
        // 为数据添加id
        let idSequence = 1;
        data.forEach(function (item: any) {
          item.id = idSequence++;
        });
        // 用完整数据集初始化模拟服务器
        const fakeServer = new FakeServer(data);
        // 创建数据源并关联模拟服务器
        const datasource = getServerSideDatasource(fakeServer);
        // 向网格注册数据源
        params.api!.setServerSideDatasource(datasource);
      });
  }
}

function getServerSideDatasource(server: any): IServerSideDatasource {
  return {
    getRows: (params) => {
      console.log('[数据源] - 网格请求的行数据: ', params.request);
      const response = server.getData(params.request);
      // 添加延迟模拟真实服务器请求
      setTimeout(function () {
        if (response.success) {
          // 调用成功回调
          params.success({
            rowData: response.rows,
            rowCount: response.lastRow,
          });
        } else {
          // 通知网格请求失败
          params.fail();
        }
      }, 200);
    },
  };
}

解决方案 #

1. 升级Ag-Grid版本：该问题在Ag-Grid后续稳定版本（如30.x及以上）中已被官方修复，升级后可直接解决分页跳转时的大量请求问题。
2. 自定义缓存逻辑：在getServerSideDatasource的getRows方法中，拦截网格请求参数，判断是否为从最后一页切换到前一页的场景，调整请求的起始偏移量，仅请求目标页面的数据。
3. 替换行模型：若业务场景允许，可改用infinite行模型，其缓存策略会根据可视区域加载数据，减少不必要的请求。

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