Браузер: как кэшировать большие данные, но при этом обновлять мелкие детали?

Question

У меня есть список из 20 тысяч сотрудников, которые нужно отобразить в таблице React.Когда пользователь с правами администратора меняет его, я хочу, чтобы это изменение было отражено в таблице - даже если он выполняет перезагрузку - но я не хочу повторно получать все 20 КБ, включая неизмененные 19 999.

(таблицаконечно, разбит на страницы и показывает максимальное N сразу, но мне все еще нужны все 20 Кб для поддержки поиска и фильтрации, что нецелесообразно для серверной стороны по разным причинам)

Решение, которое я могу придумать, это установить заголовки кэшированиядля / api / employee, чтобы он кэшировался, например, в течение одного часа и имел другую конечную точку, / api / employee? changeSince = и каким-то образом гарантировал, что сервер знает, какие сотрудники были изменены.Но я уверен, что кто-то уже реализовал решение (я) для этого ...

Спасибо!

Answer 1

Поскольку вы говорите, что управляете бэкэндом внешних интерфейсов, imho этот бэкэнд должен кэшировать все вышестоящие данные в своей собственной (SQL или любой другой) базе данных.Затем бэкэнд может выставить правильный API (с нумерацией страниц и поиском).Бэкэнд также может реализовать некоторую логику, чтобы определить, какие строки были изменены.Если веб-интерфейсу требуются прямые обновления об изменениях, вы можете использовать технологию, которая позволяет двунаправленную связь (SignalR, если ваш бэкэнд основан на .NET, или что-то вроде socket.io, если у вас есть бэкэнд узла, или даже простые веб-сокеты)

Answer 2

Решение с меткой времени было бы лучшим и самым простым способом его реализации.Это потребует лишь небольшого количества дополнительных данных для хранения и предоставит наиболее поддерживаемое и расширяемое решение.

Все, что вам нужно сделать, это обновить отметку времени при обновлении элемента в списке.Затем, когда страница загружается в первый раз, обращайтесь к /api/employees, а затем периодически запрашивайте /api/employees?changedSince, чтобы вернуть все измененные строки в таблице, чтобы React затем обновлялся.

Что касается кэширования основной конечной точки /api/employees, я не уверен, какую выгоду вы получите от этого, но это зависит от того, как часто обновляются данные.