Server-side операции

MUI (Material-UI) предоставляет набор компонентов и утилит, которые позволяют эффективно интегрировать серверные данные в интерфейс. Server-side операции включают работу с данными на стороне сервера до их отображения в компонентах, что особенно важно для таблиц, списков и пагинации.

Пагинация с серверной загрузкой

Компонент DataGrid MUI поддерживает серверную пагинацию через свойства paginationMode и обработчики событий. Для реализации серверной пагинации требуется:

  1. Настройка DataGrid:
<DataGrid
  rows={rows}
  columns={columns}
  pagination
  paginationMode="server"
  rowCount={totalRows}
  page={page}
  pageSize={pageSize}
  onPageCha nge={handlePageChange}
  onPageSizeCha nge={handlePageSizeChange}
/>
  1. Обработка событий пагинации:
const handlePageChange = (newPage) => {
  fetchRows(newPage, pageSize);
};

const handlePageSizeChange = (newSize) => {
  setPageSize(newSize);
  fetchRows(page, newSize);
};
  1. Функция загрузки данных с сервера:
const fetchRows = async (page, size) => {
  const response = await fetch(`/api/data?page=${page}&size=${size}`);
  const data = await response.json();
  setRows(data.items);
  setTotalRows(data.total);
};

Ключевой момент: rowCount должен отражать общее количество записей на сервере, чтобы пагинация отображалась корректно.

Сортировка на сервере

MUI DataGrid позволяет включить серверную сортировку через sortingMode="server" и обработчик onSortModelChange.

<DataGrid
  rows={rows}
  columns={columns}
  sortingMode="server"
  sortModel={sortModel}
  onSortModelCha nge={handleSortModelChange}
/>
const handleSortModelChange = (model) => {
  setSortModel(model);
  fetchRows(page, pageSize, model);
};

Сервер должен принимать параметры сортировки и возвращать уже отсортированные данные.

Фильтрация данных на сервере

Для серверной фильтрации используется свойство filterMode="server" и onFilterModelChange.

<DataGrid
  rows={rows}
  columns={columns}
  filterMode="server"
  filterModel={filterModel}
  onFilterModelCha nge={handleFilterChange}
/>
const handleFilterChange = (model) => {
  setFilterModel(model);
  fetchRows(page, pageSize, sortModel, model);
};

Важно учитывать, что сервер должен поддерживать фильтрацию по всем столбцам, указанным в filterModel.

Интеграция с GraphQL и REST

MUI не накладывает ограничения на источник данных. REST API и GraphQL могут быть использованы одинаково.

Пример с GraphQL:

const GET_USERS = gql`
  query GetUsers($page: Int, $pageSize: Int) {
    users(page: $page, pageSize: $pageSize) {
      items {
        id
        name
        email
      }
      total
    }
  }
`;

const { data, refetch } = useQuery(GET_USERS, { variables: { page: 0, pageSize: 10 } });

refetch можно вызывать при изменении страницы, размера страницы, фильтров или сортировки.

Оптимизация производительности

  1. Debounce запросов – полезно при фильтрации, чтобы избежать множества запросов при вводе текста.
const debouncedFetch = useMemo(() => debounce(fetchRows, 300), [fetchRows]);

  1. Ленивая загрузка данных (Lazy Loading) – загружать данные только при видимости компонента.

  2. Кеширование – сохранять результаты предыдущих запросов на клиенте для уменьшения нагрузки на сервер.

Асинхронная обработка ошибок

При работе с сервером необходимо корректно обрабатывать ошибки:

try {
  const response = await fetch(`/api/data?page=${page}&size=${size}`);
  if (!response.ok) throw new Error('Ошибка загрузки данных');
  const data = await response.json();
  setRows(data.items);
} catch (error) {
  console.error(error);
  setError(error.message);
}

DataGrid можно настроить на отображение сообщений об ошибках через components и componentsProps:

<DataGrid
  rows={rows}
  columns={columns}
  components={{ NoRowsOverlay: CustomNoRows, ErrorOverlay: CustomError }}
/>

Серверная агрегация и группировка

Для сложных таблиц MUI поддерживает группировку и агрегацию на сервере через передачу параметров группировки в API. Клиент только отображает результат, минимизируя нагрузку на фронтенд.

const groupModel = [{ field: 'category' }];
fetchRows(page, pageSize, sortModel, filterModel, groupModel);

На сервере выполняются агрегации, подсчет сумм, средних значений или других метрик, после чего клиент получает уже готовые к отображению данные.

Итоговая структура server-side DataGrid

Основная идея серверных операций: фронтенд отвечает только за отображение и управление состоянием интерфейса, а сервер обрабатывает:

  • Пагинацию
  • Сортировку
  • Фильтрацию
  • Группировку и агрегацию

Это повышает производительность приложения, особенно при работе с большими массивами данных.

Все эти возможности делают MUI гибким инструментом для построения масштабируемых интерфейсов с полноценной интеграцией серверной логики.

Оглавление