Как в react работать с большим количеством данных?
Пишу приложение (на реакте) для удобного просмотра статистики сыгранных матчей и расчета некоторых дополнительных параметров. С сервера мне приходит статистика в виде массива матчей (идентификатор матча, длительность и т.д.). Этих матчей может быть очень много, до нескольких тысяч (пусть будет например 5000), и приходят они одним махом (функции пагинации сервер не предоставляет).
Чтобы отобразить ту информацию по матчу, ради которой я и пишу приложение, мне нужно сделать дополнительный запрос для каждого матча, а на основе полученных данных еще несколько запросов. Затем все полученные данные обсчитать и уже вывести на экран как "статистика матча".
Я думаю сделать так: на старте приложения загрузить весь массив матчей (все эти условные 5000), но показывать их небольшими страницами ("пачками", штук по 10 матчей) и для матчей на текущей странице уже подгружать дополнительную информацию, нужную для расчетов.
Однако, при смене страниц, я хочу чтобы уже загруженная раньше информация не стиралась, а оставалась в памяти, потому что количество запросов на сервер в сутки лимитировано. Если человек возвращается на предыдущую страницу, то не должна происходить повторная загрузка с сервера - данные должны браться из кэша.
Плюс некоторые данные являются "стационарными". Например, id персонажа и его имя. Их можно разом загрузить и дальше тащить уже не с сервера, а локально.
Что мне понадобится, чтобы это все реализовать? Вероятно, мне нужен стейт-менеджер. Если да, то какой? Или если не нужен, то что нужно вместо него?
это твой сервер или какой-то левый ? если твой то переделывай, если левый, то разверни свой сервер + redis и кэшируй данные, а с клиента вытягивай эти данные уже с пагинацией со своего сервера из своего кэша в redis, а данные в redis обновляй каждый час например, выйдет вообще идеально, и суть будет примерно такая , ты с клиента отправляешь запрос на свой сервер с параметрами для пагинации -> твой сервер смотрит данные в redis и проверяет нужно ли их обновить или если нет данных - отправляешь запрос на 5к записей на чужой сервер и сохраняешь в redis, кентавр как раз таки и мыслит в том же направлении
ещё как вариант если это не твой сервер, то просто ты не нашёл пагинацию, но она там есть, либо не разобрался с ней, а говоришь что её нет, не ну это дебилом надо на бэкенде быть что бы 5к объектов отдавать без какой-либо пагинации
szQocks, сервер не мой. Правда, оказалось что пагинация есть, в краткой документации не было в примерах, а в полной нашел.
Если делать свою прослойку с редисом, то это надо где-то поднимать сервер, а бесплатных сервисов таких наверное нет. В будущем я думаю перенести на электрон, чтобы было настольное приложение с локальной БД. Но это слишком много технологий, так что пока делаю хотя бы базовую версию в браузере.
Путей решений большое количество, и они зависят от твоих хотелок.
Вариант а - с кульбитами, но я бы так сделал. Пишешь небольшой бекенд на экспрессе для своего приложения. На беке с помощью cron например раз в день/час/несколько минут делаешь запрос на нужное апи, записываешь в своей бд ответ. Вопрос с лимитом запросов решен. далее делаем пагинацию на своем сервере (очень простое действие) и отправляешь пользователю человеческий ответ по АПИ, который будет соответствовать всем твоим запросам и нуждам. На фронте остается допилить простое СПА без извращений и сложностей.
Вариант б - сохраняешь ответ на клиенте, обновляешь кеш раз за n-ное время, как предложено выше. В таком случае проще всего действительно использовать локалстор для хранения ответа по АПИ. Если хочется более продвинутой работы, обрати внимание на indexedDB -есть несколько интересных адаптеров для реакта, которые упрощают работу.
Вопрос с сохранением данных при переходе на другую страницу решается просто (я догадываюсь что под другой страницей ты подразумеваешь роутинг в react SPA). Это либо хранение состояния на верхнем уровне приложения, либо стейт менеджер. Внимание - стейт-менеджер только упрощает(!!!) обращение со сложным стейтом в относительно больших приложениях. Это не панацея, по факту он делает то же самое что и обычный хук стейта. Тебе скорее всего не принципиально, но при желании пришить условный zustand можно. Это вкусовщина.
Можно вообще написать кастомный хук для работы с локалстором/индекседДБ и юзать на каждой странице, считывая при заходе на каждую страницу данные и одновременно проверяя их "свежесть". Тогда стейт менеджеры точно не нужны от слова совсем.
Пагинацию в итоге нашел в документации.
Чтобы свой бэк сделать, надо где-то его поднимать, а бесплатно такие сервисы вряд ли есть. К тому же хотелось бы самодостаточное приложение.
Вот за indexedDB спасибо, не знал что такое существует. Погуглю про него и про локалстор.
Средний
