API-пагинация и поиск с помощью Symfony и React: лучшая практика
Я работаю над приложением Fullstack с Symfony 6.4 и React.js. У меня концептуальный вопрос о нумерации страниц и поиске.
Пагинация
Я реализовал нумерацию страниц с помощью Symfony, гарантируя, что API всегда извлекает 10 элементов на каждую страницу. Эта установка работает идеально. Однако считается ли хорошей практикой вызывать API каждый раз при переключении нумерации страниц? Второй вопрос о нумерации страниц: в этом случае сортировка по будет работать только для 10 записей.
Вопрос 1. Лучше ли получить все данные из базы данных и выполнить сортировку и нумерацию страниц на стороне клиента? Или лучше это сделать на стороне сервера? В таблице может быть много записей.
CustomeRepository
class CustomerRepository extends ServiceEntityRepository
{
public function __construct(ManagerRegistry $registry)
{
parent::__construct($registry, Customer::class);
}
public function getCustomers(
string $column,
string $type,
int $page = 1,
int $entriesPerPage = 10): array
{
$query = $this->createQueryBuilder('d')
->orderBy("d.$column", $type)
->getQuery();
$paginator = new Paginator($query);
$paginator->getQuery()
->setFirstResult($entriesPerPage * ($page - 1))
->setMaxResults($entriesPerPage);
$total = $paginator->count();
$lastPage = (int)ceil($total / $entriesPerPage);
return [
'customers' => $paginator,
'lastPage' => $lastPage,
'total' => $total
];
}
}
Клиентконтроллер
#[Route(path: "/api/customer/{column}/{type}/{page}", name: "customer_get", methods: ["GET"])]
public function getCustomer(
CustomerService $customerService,
string $column,
string $type,
int $page=1
): JsonResponse
{
return $this->json($customerService->getCustomers($column, $type, $page));
}
Искать
Вопрос 2: До сих пор поиск выполнялся на стороне клиента. Лучше ли сделать это на стороне сервера?
Ответы 1
В общем, всегда лучше выполнять сортировку, разбиение на страницы и поиск на стороне сервера, а не на стороне клиента, и для этого есть очень веские причины:
ограниченная вычислительная мощность на стороне клиента: следует предположить, что клиентское устройство не обладает большой вычислительной мощностью, поскольку это устройство с очень ограниченными ресурсами, поэтому клиентское устройство, вероятно, будет зависать и тормозить, если его попросят обработать огромный объем данных. .
Операции на стороне сервера имеют более высокую производительность: когда вы извлекаете данные из базы данных и хотите разбить результаты на страницы, построитель запросов будет использовать операторы MySQL
LIMITиOFFSET, чтобы сократить именно тот объем данных, который вам нужен, вместо того, чтобы разбивать его на несколько частей. на стороне клиента, и если вы хотите отсортировать данные, то построитель запросов будет использовать для этого оператор MySQLORDER BYвместо сортировки вручную на стороне клиента. Если вы хотите выполнить поиск внутри данных, то построитель запросов будет использовать оператор MySQLWHEREдля выполнения поиска вместо необходимости искать конкретные данные на стороне клиента. Помимо всего этого, вы можете оптимизировать свою базу данных и использовать индексы, чтобы еще больше ускорить эти операции.отправлять только те данные, которые интересуют клиента: клиенту может потребоваться несколько конкретных записей, но если вы отправляете содержимое всей таблицы базы данных на сторону клиента, вы отправляете ему данные, которые ему могут не понадобиться или которые он может не использовать. все. Этот момент важен, поскольку тело ответа может стать очень большим, и клиент может долго ждать, прежде чем полностью получить ответ, особенно при медленных сетевых подключениях и ограниченных тарифных планах передачи данных.
Считается ли хорошей практикой вызывать API каждый раз при переключении нумерации страниц?
Обычно с этим проблем не возникает. Однако вы можете отправить разумный объем данных, чтобы пользователю не приходилось слишком часто использовать нумерацию страниц. Например, на каждой странице отправлять сразу 50 записей, и, возможно, вы сможете кэшировать предыдущую страницу при переходе пользователя на следующую (хотя я не уверен, что это можно сделать, так как я не React-разработчик, но все еще)
Важное примечание: вы можете быть уязвимы для атак с использованием SQL-инъекций в этой строке:
$query = $this->createQueryBuilder('d')
->orderBy("d.$column", $type)
->getQuery();
Поскольку вы передаете имя столбца как переменную, и эти части запроса SQL не могут использовать привязки запроса. Для получения дополнительной информации, пожалуйста, обратитесь к Страница предотвращения SQL-инъекций на веб-сайте шпаргалки OWASP.