Каков наилучший способ постраничной обработки большой таблицы с помощью React Table и Django?

У меня есть таблица с 50k строк и 20+ столбцов. На данный момент я настроил пользовательскую пагинацию Django Rest Framework, чтобы я мог использовать строку запроса для установки размера страницы, а также номера страницы:

http://127.0.0.1:8000/api/ix/?page=2&page_size=100

Результат JSON выглядит следующим образом:

{
    "count": 48629,
    "next": "http://127.0.0.1:8000/api/ix/?page=3&page_size=100",
    "previous": "http://127.0.0.1:8000/api/ix/?page_size=100",
    "results": [{...}]
}

Для фронтенда я хочу использовать React Query для получения JSON, и React Table для отображения и обработки пагинации.

Исходя из официального примера React Table, мне кажется, что он просто получает непагинированную версию данных, а затем делает нарезку на стороне клиента:

const startRow = pageSize * pageIndex
const endRow = startRow + pageSize
setData(serverData.slice(startRow, endRow))

Возможные подходы

  • Не используйте пагинацию на стороне сервера, а нарезайте данные, как показано в примере
    • Pro: Я могу просто использовать кодовую базу примера с небольшой модификацией, чтобы заставить это работать
    • Con: Загрузка данных займет довольно много времени; пагинация может привести к повторной выборке и загрузке данных для каждой операции пагинации
      • .
  • Использовать пользовательскую пагинацию на стороне сервера и создавать собственные методы пагинации
    • Pro: Так как данные уже пагинированы, эффективнее загружать их
    • Con: Приходится использовать больше кодов, что может быть чревато ошибками. Кроме того, мне пришлось бы перепроектировать компоненты, учитывая, что поток данных в React направлен только сверху вниз
      • .
  • Использовать пагинацию на стороне сервера и пагинацию на стороне клиента
    • Это может быть оптимальным, но я не знаю, как это сделать, если данные уже пагинация с фиксированным размером страницы. Предполагая, что я больше не могу запрашивать page_size, как клиентская сторона будет получать данные, когда пользователи устанавливают другой размер страницы? Например, если мой API возвращает 100 результатов на странице 1, а теперь пользователь хочет отобразить 500 строк. Будет ли React Table "волшебным образом" обращаться к API, пока не получит все 500 результатов?

Какой лучший подход здесь?

Вернуться на верх